1.什么是CSS预编译处理？CSS预编译处理，顾名思义就是对CSS进行预编译处理。它扩展了CSS语言，增加了变量、Mixin、函数等编程特性，使CSS更易于维护和扩展。CSS预编译的工作原理是为开发者编写源代码提供方便的语法和特性，然后通过专门的编译工具将源代码转换成CSS语法。CSS预编译器几乎已经成为现在开发CSS的标配。它在以下几个方面提高了CSS开发的效率：增强了编程能力；增强的可重用性；增强的可维护性；更容易解决浏览器兼容性问题。尽管不同预编译器的特性不同，但核心功能都是围绕这些目标构建的，例如：?嵌套；?变量；?混合/继承；?操作；?模块化；所有预编译器都支持嵌套原生CSS的语法特性也是开发者最头疼的问题之一；mixin/inheritance是为了解决hack和代码重用；变量和操作增强了源代码的可编程性；模块化的支持不仅更有利于代码重用，也提高了源代码的可维护性。2、为什么要使用CSS预编译？1、CSS具体有以下缺点：1）语法不够强，比如嵌套写法，导致模块化开发需要写很多重复的选择器；2）没有可变合理的样式复用机制，使得逻辑相关的属性值必须以字面形式重复输出，维护困难。2、使用CSS预编译处理的优点：使用CSS预处理器可以提供CSS所缺乏的样式层复用机制，减少冗余代码，提高样式代码的可维护性。大大提高了我们的开发效率。3、使用CSS预编译处理的缺点：CSS预处理器不是万能的。CSS的优点是简单，随时随地都可以使用和调试。预编译CSS这一步的加入，给我们的开发流程增加了一个环节，调试也变得更加麻烦。一个更大的问题是预编译很容易导致滥用后代选择器。所以我们在实际项目中衡量预编译方案的时候，还是要思考CSS预处理器是否解决了比额外的维护开销更多的麻烦。3、CSS主流预处理器：Sass、Less和Stylus目前CSS主流预处理器有Sass、Less和Stylus。最早的CSS预编译器是SASS，它起源于2007年的RubyonRails社区。目前其他流行的CSS预编译器如Less和Stylus的诞生都在一定程度上受到了SASS的影响和启发。三大框架介绍1.Sass：诞生于2007年，最早最成熟的CSS预处理器，在ruby社区和compass的支持下，最强大的CSS框架，在LESS的影响。SCSS。事实上，Sass现在有两套语法规则：一套仍然使用缩进作为分隔符来区分代码块；一套仍然使用缩进作为分隔符。另一组规则像CSS一样使用花括号({})作为分隔符。后一种语法规则，也称为SCSS，在Sass3之后的版本中得到支持。2.Less：出现于2009年，受SASS影响较大，但也使用了CSS的语法，使得大多数开发者和设计者更容易上手。ruby社区之外的支持者远超SASS。它的缺点是与ForSASS相比，可编程功能不够，但优点是简单，兼容CSS，进而影响了SASS向SCSS时代的演进。著名的TwitterBootstrap使用LESS作为底层语言。3.Stylus：创建于2010年，来自Node.js社区。主要用于支持Node项目的CSS预处理。这个社区有一些支持者。从广义上讲，它不如SASS和LESSStylus受欢迎。它被称为一种革命性的新语言，它提供了一种高效、动态和富有表现力的方式来生成供浏览器使用的CSS。Stylus同时支持缩进和CSS通用样式书写规则。四、CSS预处理器的选择1、Sass的优点1）用户多，更容易找到会用scss的开发者，也更容易找到scss的学习资源；2）可编程性比较强，支持函数、列表、对象、判断、循环等；3）与less相比，它的功能更多；4）Bootstrap/Foundation等使用scss；5）丰富的sass库：Compass/Bourbon；缺点是安装node-sass会经常失败或报错，需要使用cnpm或手动安装2.Less的优点：可以在浏览器中运行，实现主题自定义功能；缺点：编程能力弱，不直接支持对象、循环、判断等；@variable变量命名与css@import/media/keyframes等含义容易混淆；mixin/extend的语法很奇怪；mixin的参数如果遇到多参数和列表参数值，很容易混淆；3、Stylus的优点：来自于NodeJS社区，所以和NodeJS很接近，和JavaScript关系密切。还有专门的JavaScriptAPI：http://learnboost.github.io/stylus/docs/js.html支持Ruby3等框架支持和功能越来越强大缺点：普及度低，教程少总结：Sass好像在提供的功能上有优势，但是LESS允许开发者从现有的CSS文件平滑过渡到LESS，而不需要像Sass一样将CSS文件转换成Sass格式。Stylus在功能上更强大，与js的关系也更密切。五、CSS预处理器学习Sass中文文档：http://sass.bootcss.com/Less中文文档：https://less.bootcss.com/Stylus官方文档：http://stylus-lang.com/Stylus中文文档:https://www.zhangxinxu.com/jq...如果觉得这篇文章对你有帮助，请顺便点个赞，关注不要迷路~黑芝麻哇，白芝麻发，黑芝麻和白芝麻哇！前端哇
