css预编译的优缺点

什么是CSS预编译？

CSS 预编译，就是预先编译处理CSS。它扩展了 CSS 语言，增加了变量、Mixin、函数等编程的特性，使 CSS 更易维护和扩展。CSS预编译的工作原理是提供便捷的语法和特性供开发者编写源代码，随后经过专门的编译工具将源码转化为CSS语法。

它从这几个方面提升了CSS开发的效率：增强编程能力；增强可复用性；增强可维护性；更便于解决浏览器兼容性。

CSS预编译的核心功能

不同的预编译器特性虽然有所差异，但核心功能均围绕这些目标打造，比如：

嵌套（所有预编译器都支持的语法特性，也是原生CSS最让开发者头疼的问题之一）
变量（增强了源码的可编程能力）
运算（增强了源码的可编程能力）
mixin/继承（为了解决hack和代码复用）
模块化（不仅更利于代码复用，同时也提高了源码的可维护性）

为什么要用CSS预编译？

1.CSS的缺点：

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

2.CSS预编译的优点：

可以提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大提高了开发效率。

CSS预编译的缺点

CSS的好处在于简便、随时随地被使用和调试。预编译CSS步骤的加入，让我们开发工作流中多了一个环节，调试也变得更麻烦了。更大的问题在于，预编译很容易造成后代选择器的滥用。所以我们在实际项目中衡量预编译方案时，还是得想想，比起带来的额外维护开销，CSS预处理器有没有解决更大的麻烦。

CSS和CSS预编译的比较

	优点	缺点
CSS	简便、可随时随地被使用和调试	语法不够强大，模块化开发中需要书写很多重复的选择器；没有变量和合理的样式复用机制，难以维护。
CSS预编译	提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性	调试更麻烦；容易造成后代选择器的滥用

优点

缺点

CSS

简便、可随时随地被使用和调试

语法不够强大，模块化开发中需要书写很多重复的选择器；

没有变量和合理的样式复用机制，难以维护。

CSS预编译

提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性

调试更麻烦；

容易造成后代选择器的滥用

主流CSS预编译器的介绍

目前css主流预处理器是Sass、Less和Stylus，最早的CSS预编译器是2007年起源于Ruby on Rails社区的SASS，目前比较流行的其他CSS预编译器如Less、Stylus的诞生都一定程度上受到了SASS的影响和启发。

1.Sass

2007年诞生，最早也是最成熟的CSS预处理器，拥有ruby社区的支持和compass这一最强大的CSS框架，目前受LESS影响，已经进化到了全面兼容CSS的SCSS。
其实现在的Sass已经有了两套语法规则：一个依旧是用缩进作为分隔符来区分代码块的；另一套规则和CSS一样采用了大括号（｛｝）作为分隔符。后一种语法规则又名SCSS，在Sass3之后的版本都支持这种语法规则。

Sass中文文档：http://sass.bootcss.com/

2.Less

2009年出现，受SASS的影响较大，但又使用CSS的语法，让大部分开发者和设计师更容易上手，在ruby社区之外支持者远超过SASS，其缺点是比起SASS来，可编程功能不够，不过优点是简单和兼容CSS，反过来也影响了SASS演变到了SCSS的时代，著名的Twitter Bootstrap就是采用LESS做底层语言的。

Less中文文档：https://less.bootcss.com/

3.Stylus

2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，在此社区之内有一定支持者，在广泛的意义上人气还完全不如SASS和LESS
Stylus被称为是一种革命性的新语言，提供一个高效、动态、和使用表达方式来生成CSS，以供浏览器使用。Stylus同时支持缩进和CSS常规样式书写规则。

Stylus官方文档：http://stylus-lang.com/
Stylus 中文文档：https://www.zhangxinxu.com/jq/stylus/

比较

	优点	缺点
sass	用户多，更容易找到会用scss的开发，更容易找到scss的学习资源；可编程能力比较强，支持函数，列表，对象，判断，循环等；相比less有更多的功能； Bootstrap/Foundation等使用scss；丰富的sass库：Compass/Bourbon；	安装node-sass会经常失败或者报错，需要使用cnpm或者手工安装
less	可以在浏览器中运行，实现主题定制功能；	编程能力弱，不直接支持对象，循环，判断等； @variable 变量命名和css的@import/media/keyframes等含义容易混淆； mixin/extend的语法比较奇怪； mixin的参数如果遇到多参数和列表参数值的时候容易混淆；
stylus	来自NodeJS社区，所以和NodeJS走得很近，与JavaScript联系非常紧密。还有专门JavaScript API： http://learnboost.github.io/stylus/docs/js.html 支持Ruby之类等等框架3.更多更强大的支持和功能	人气不高，教程较少

Sass看起来在提供的特性上占有优势，但是LESS能够让开发者平滑地从现存CSS文件过渡到LESS，而不需要像Sass那样需要将CSS文件转换成Sass格式。Stylus功能上更为强壮，和js联系更加紧密。