前端-CSS预处理

css预处理

一、什么是css预处理

css预处理器是一种新的编程语言，为css增加一些编程的特性，无需考虑兼容性问题。CSS预编译的工作原理是提供便捷的语法和特性供开发者编写源代码，随后经过专门的编译工具将源码转化为CSS语法。前端工程化的里程碑。

二、为什么需要css预处理

一样东西的出现肯定是为了解决某种东西的缺陷。css预处理也不例外，它的出现是来解决css的一些缺点的。

• 2.1css有什么样的缺点？

（1）语法不够强大，无法嵌套书写，开发中需要重复写很多遍选择器，造成代码冗余

（2）没有变量、样式复用的规则，难以维护，开发效率低

• 2.2css预处理的优点？

（1）提供样式复用的机制

（2）减少代码冗余，便于维护，开发效率高

• 2.3css预处理的特点？

（1）基于css的另一种编程语言

（2）通过中间工具编译成css

（3）增加一些css不具备的新特性

（4）提升css的文件组织

• 2.4css提高开发效率

（1）增强编程能力

（2）增强可复用性

（3）增强可维护性

（4）浏览器更好的兼容性

三、css预处理能力

（1）嵌套—层级和约束

（2）变量和计算—减少重复冗余代码

（3）Mixin/Extend复用代码片段

（4）模块化—importCSS文件

（5）循环 适应于复杂有规律的样式

四、css三大主流预处理器：Sass、Less、stylus