首页 > 技术文章 > Sass和less的区别

yjd-05 2020-11-25 11:13 原文

Sass和less的区别

首先,sass和less都是css的预编译处理语言,他们引入了mixins,参数,嵌套规则,运算,颜色,名字空间,作用域,JavaScript赋值等 加快了css开发效率,当然这两者都可以配合gulp和grunt等前端构建工具使用,但是他们两者有什么不同呢?

1.编译环境不同

    less是通过js编译 是在客户端处理

    sass同通过ruby 是在服务器端处理

2.变量符不一样

    less是用@,sass是用$

3.sass支持条件语句,可以使用if{}else{},for{}循环等等。而less不支持。

4.输出设置

  less没有输出设置

  sass提供4中输出选项:nested, compact, compressed 和 expanded。

    输出样式的风格可以有四种选择,默认为nested

    nested:嵌套缩进的css代码

    expanded:展开的多行css代码

    compact:简洁格式的css代码

    compressed:压缩后的css代码

5.Sass和Less的工具库不同

  Sass有工具库Compass, 简单说,Sass和Compass的关系类似于像Javascript和jQuery的关系,Compass在Sass的基础上,封装了一系列有用的模块和模板,补充强化了Sass的功能。

  Less有UI组件库Bootstrap,Bootstrap是web前端开发中一个比较有名的前端UI组件库,Bootstrap的样式文件部分源码就是采用Less语法编写。

6.总结

less和sass各有各自的好处,二者的出现都是为了同一个目的:提高开发效率!每个开发者根据自己的习惯和爱好来选择使用哪个。

推荐阅读