Sass和Less

Posted 2022-03-14 torri

Sass和Less 都是CSS预处理器，简单说CSS预处理器是定义了一种新的语言，专门的样式编程语言，进行web页面的样式设计，再通过编译器转化为正常的css文件，供项目使用。

1. 为什么要用CSS预处理器？

作为一个前端开发，我们应用javascript语言，可以定义变量，方法，可以引用，代码共用等。但是css本身缺乏这些，有自身的一些缺陷：

（1）语法不够强大，不可以嵌套书写

（2）没有变量和合理的样式复用机制，难以维护

而引入CSS预处理器，增加的定义变量，嵌套以及样式的服用机制，减少冗余代码，提高可维护性，大大提高了开发效率。

但是引入了CSS预处理器，也相应的增加了开销，需要编译处理浏览器识别的css样式，怎样的低耗快速处理是需要考虑的。

2.Sass和Less的不同之处

（1）Less的运行环境比Sass简单

Less是再浏览器端编译，基于javaScript; 而Sass在服务端编译，需要安装Ruby环境。但是Sass处理相对Less要快。

  (2) Less使用比Sass简单

Less没有改变Css原有的特性，在原有的基础上增加了程序化的语言特性。了解css, 就很容易上手。

（3）从功能出发，Sass比Less强一点

       1.sass有变量和作用域，变量有全局和局部之分，并且有优先级

　　 2.sass有函数的概念，@function和@return 以及函数参数，可以像js那样封装你想要的逻辑。@mixin 提高了css代码段的复用性和模块化，另外，Ruby提供了非常丰富的内置原生api。

       3.进程控制，条件：@if @else ; 循环遍历： @for @each @while ；继承：@extend ；引用：@import

　　 4.数据结构 $list=数组；$map=object，还有string,number,function等类型

（4）变量定义的唯一区别： sass用$,less用@

3.Sass和Less的相同之处

Less和Sass在语法上有些共性，比如下面这些：

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

4.选择Sass的一些理由

1、Sass在市面上有一些成熟的框架，比如说Compass，而且有很多框架也在使用Sass，比如说Foundation。

2、就国外讨论的热度来说，Sass绝对优于LESS。

3、就学习教程来说，Sass的教程要优于LESS。在国内LESS集中的教程是LESS中文官网，而Sass的中文教程，慢慢在国内也较为普遍。

4、Sass也是成熟的CSS预处理器之一，而且有一个稳定，强大的团队在维护。

5、同时还有Scss对sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用取代了原来的缩进。

6、bootstrap（Web框架）最新推出的版本4，使用的就是Sass。