【前端知识体系-CSS相关】CSS预处理器

1.常见的CSS预处理器有哪些？

[!NOTE]
css预处理器：用一种专门的编程语言，为CSS增长了一些编程的特性，将CSS做为目标生成文件，而后开发者就只要使用这种语言进行编码工做，可让你的CSS更加简洁、适应性更强、可读性更佳，更易于代码的维护等诸多好处

• Sass(Scss)：2007,ruby编写
• Less: 2009，js编译

1.1 使用流程？

1. 基于CSS的另一种语言
2. 经过工具编译成CSS
3. 添加了不少CSS不具有的特性
4. 同时CSS文件的组织方式

1.2 预处理器的做用有哪些？

1. 帮助开发者更好组织CSS代码（变量，mixIn）
2. 提升代码的复用性
3. 代码的可维护性加强

2.Less/Sass预处理器的功能？

1. 嵌套： 反映层级和约束
2. 变量和计算： 减小重复代码
3. Extend和mixIn： 代码片断的抽离
4. 循环: 适用于复杂有规律的样式
5. import：能够实现CSS文件的模块化

3.CSS预处理器的优缺点？

• 优势： 提升代码的复用率和可维护性
• 缺点： 引入了编译的过程，有必定的学习成本

前端工程化：预处理再也不是惟一的手段了，可使用工程化构建工具进行处理

4.scss和less的区别？

1. 编译环境不同
2. 变量符不同，Less是@，而Scss是$，并且变量的做用域也不同。
3. 输出设置，Less没有输出设置，Sass提供4种输出选项：
4. Sass支持条件语句，可使用if{}else{},for{}循环等等。而Less不支持。
5. 引用外部CSS文件
6. 工具库不一样