Less、Sass/Scss是什么?他们有什么区别?

Less、Sass/Scss是什么?

Less:

是一种动态样式语言. 对CSS赋予了动态语言的特性,如变量、继承、运算、函数。
Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox),也可在服务端运行。

Sass:

是一种动态样式语言,Sass语法属于缩排语法,
比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理,函数等),更容易阅读。

Sass与Scss是什么关系?

Sass的缩排语法,对于写惯css前端的web开发者来说很不直观,也不能将css代码加入到Sass里面,因此sass语法进行了改良,Sass 3就变成了Scss(sassy css)。与原来的语法兼容,只是用{}取代了原来的缩进。

SCSS 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能。Sass 和 SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点:

  1. 文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名

  2. 语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

less和sass的相同之处

  1. 混入(Mixins)——class中的class;
  2. 参数混入——可以传递参数的class,就像函数一样;
  3. 嵌套规则——Class中嵌套class,从而减少重复的代码;
  4. 运算——CSS中用上数学;
  5. 颜色功能——可以编辑颜色;
  6. 名字空间(namespace)——分组样式,从而可以被调用;
  7. 作用域——局部修改样式;
  8. avaScript赋值——在CSS中使用JavaScript表达式赋值。

less和sass的区别

  1. Less环境较Sass简单

Sass的安装需要安装Ruby环境,Less基于JavaScript,是需要引入Less.js来处理代码输出css到浏览器,也可以在开发环节使用Less,然后编译成css文件,直接放在项目中,有less.app、SimpleLess、CodeKit.app这样的工具,也有在线编辑地址。

  1. Less使用较Sass简单
  2. Sass较Less略强大一些

sass有变量和作用域;sass有函数的概念;进程控制;数据结构等;

  1. Less与Sass处理机制不一样

前者是通过客户端处理的,后者是通过服务端处理,相比较之下前者解析会比后者慢一点;

  1. 变量在Less和Sass中的唯一区别就是Less用@,Sass用$。

推荐使用Sass的原因

  1. Sass有更成熟的框架,比如说Compass,而且有很多框架也使用Sass,比如说Foundation;
  2. 就国外讨论的热度来说,Sass绝对优于less;
  3. 在国内less集中的教程是less中文官网,而Sass的中文教程,在国内较为普遍;
  4. sass也是成熟的CSS预处理器之一,而且有一个稳定,强大的团队在维护;
  5. scss对sass语法进行了改良,sass 3变成了Scss(sassy css)。与原来的语法兼容,只是用{}取代了原来的缩进;
  6. bootstrap(Web框架)最新推出的版本4,使用的就是Sass,可以看出sass有更多市场价值。
  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

一只月月鸟呀

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值