【CSS】聊聊less、sass、scss以及compass

🆚 less、sass、scss以及compass之间的区别与联系

◼️Scss其实是Sass的改进版本

Sass语法是缩排语法，对于写惯css前端的web开发者来说很不直观，也不能将css代码加入到Sass里面，因此Sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。且比css比多出好些功能(如变量、嵌套、运算,混入(Mixin)、继承、颜色处理，函数等)，更容易阅读。

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

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

◼️ 编译环境不同

Less环境较Sass简单。Sass的安装需要安装Ruby环境，Less基于JavaScript运行，Less在编译时需要引入Less.js来处理Less代码输出css到浏览器上，也可以在开发服务器上将Less语法编译成css文件，输出CSS文件到生产包目录，也有在线编译地址。所以说，less是通过js编译在客户端处理，sass是通过ruby(之前是Ruby,现在是Dart-Sass或者是Node-Sass)，在服务器端处理(Less在JS上运行，Sass在Ruby上使用)。

很多开发者不选用less是因为less输出修改过的css到浏览器需要依赖于javascript引擎，而javascript引擎需要额外的时间来处理。优化方式：只在开发环节使用less，一旦完成了开发，可以复制然后粘贴LESS输出的到一个压缩器，然后到一个单独的CSS文件来替代LESS文件。这样将最小化你的样式输出

◼️ 变量符的使用方式以及变量作用域不同

Less使用@，而Sass使用$。 即$变量名：变量值，声明变量；如果变量需要在字符串中嵌套，则需使用#加大括号包裹：border-#{$left}:10px solid blue;

less中重新定义的变量只在自己作用域是新定义的值，而less中重新定义变量后，代码中此处之后的该变量的值，将会被重写

◼️ 输出设置不同

Less没有输出设置，Sass提供4种输出选项。输出样式的风格可以有四种选择，默认为nested。①nested：嵌套缩进的css代码；②expanded：展开的多行css代码；③compact：简洁格式的css代码；④compressed：压缩后的css代码。

◼️ 在Less中，仅允许循环数值

在Sass中，我们可以遍历任何类型的数据。但在Less中，我们只能使用递归函数循环数值。

◼️ 是否支持条件语句

Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。

◼️ Less与Sass处理机制不一样

Less是通过客户端处理的，Sass是通过服务端处理，相比较之下Less解析会比Sass慢一点。

◼️ Sass和Less的工具库不同

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

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

总之，less和sass各有各自的好处，二者的出现都是为了同一个目的：提高开发效率！每个开发者根据自己的习惯和爱好来选择。
 

⏬ 小结

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

👉 Sass(Syntactically Awesome Stylesheets)是一门高于 CSS 的动态样式语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表以及更高效地开发项目。

👉 Scss 是 Sass 3 引入新的语法，是Sassy CSS的简写，是CSS3语法的超集，也就是说所有有效的CSS3样式也同样适合于Sass。说白了Scss就是Sass的升级版，Sass 3就变成了Scss(sassy css)，其语法完全兼容 CSS3，并且继承了 Sass 的强大功能。 

👉 Compass是CSS样式框架，Compass由SASS的核心团队成员Chris Eppstein创建，是一个非常丰富的样式框架，包括大量定义好的mixin，函数，以及对SASS的扩展。说的白一点，Compass与sass的关系可以理解为jquery和javascript的关系。

🙋‍♂️ 使用预处理器的好处

1️⃣ 提供CSS缺失的样式层复用机制

2️⃣ 减少冗余代码

3️⃣ 提高样式代码的可维护性

4️⃣ 结构清晰，便于扩展可以方便的屏蔽浏览器私有的语法差异

5️⃣ 轻松实现多重继承，完全兼容了CSS代码，提高了开发效率。