Less和Sass的区别

Less和Sass的区别

Less和Sass都属于CSS预处理器，那什么是 CSS 预处理器呢？
CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。

一、Less和Sass分别是什么：

1. Less(Leaner Style Sheets) :
   是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。Less 可以运行在 Node 或浏览器端。
   链接: Less官网.

2. Sass(Syntactically Awesome StyleSheets):
   Sass 是一款强化 CSS 的辅助工具，它在 CSS语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。
   链接: Sass中文网.

二、Less和Sass相同：

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

三、Less和Sass的不同：

1. Less是基于JavaScript，是在客户端处理的。
   Sass是基于Ruby的，是在服务器端处理的。

2. 关于变量在Less和Sass中的唯一区别就是：
   Less用@，
   Sass用$。

3. 输出设置：
   Less没有输出设置，
   Sass提供4中输出选项：nested, compact, compressed 和 expanded。

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