了解sass和less

1. 简述sass和less？

都是css预编译处理器，都可以视为一种基于css之上的高级语言，他们引入了mixins、参数、嵌套规则、运算、颜色、名字空间、作用域、JavaScript赋值等加快了css的开发效率。

css 预处理器是指：定义一种新的语言，基本思想是，使用一种专门的编程语言，为css增加一些新特性，将css作为一种目标生成文件，然后开发者只需使用这种语言进行css编码工作。
通俗来讲，就是专门的编程语言，进行web页面样式设计，在通过编译器根据css语法转化成正常的css文件，以供使用。

SASS是一种开发工具，一门语言提供了许多便利的写法，大大节省了设计者的时间，使得css开发变得简洁和可维护开发。
Less是一门css预编译语言，他扩展了css语言，增加了变量、mixin、函数等特性，使得css变得更易维护和可扩展。

当然sass的功能比less更强大些，基本上可以说是一门真正的编程语言了，less相对清晰明了，易于上手。

---

2. sass和less的比较？

区别：

• 二者的实现方式不同：less是基于JavaScript运行，所以less是在客户端处理的；Sass是基于Ruby的，是在服务器端处理的。

很多选择者不选择less的原因是因为less输出修改过的css到浏览器需要依赖于JavaScript引擎，而JavaScript引擎需要额外的时间来处理代码。
此外sass技术较为成熟。

• 变量：less是以@来定义的，如 @color: #000; 而sass是以$开头来定义的，如 $color: #000.
• 输出设置：less没有输出设置；而sass提供了4种输出设置（nested嵌套，compact简洁的，compressed压缩，expanded扩展。）
• 条件语句：less不支持条件语句；sass可以使用if{}else{}，for{} 循环等等。

相同点（描述二者语法上的共性）：

• 混入 mixins ---- class中的class；
• 参数混入 ---- 可以传递参数的class，就像函数一样；
• 嵌套规则 ---- class中嵌套class，从而减少代码重复；
• 运算 ---- css中使用数学；
• 颜色功能 ---- 可编辑颜色；
• 名字空间 namespace ---- 分组样式，从而可以被调用；
• 作用域 ---- 局部修改样式；
• js赋值 ---- 在css中使用js表达式赋值。

---

3. 选择css预处理原因：

须知：js中可以自定义变量，而css仅仅是一个标识语言，不是编程语言，因此不可以自定义变量，不可以引用等等。

css缺点描述：

• 语法不够强大，无法嵌套书写，导致模块化开发中需要书写大量重复的选择器；
• 没有变量和合理的样式复用机制，使得逻辑上相关的属性值，必须以字面量的形式重复输出，导致难以维护。

使用css预处理器，提供了css缺少的样式层复用机制、减少代码冗余、提高样式代码的可维护性，大大提高了开发效率。

---