CSS预处理器~

其实，是因为新来一个小朋友，要问我一些问题，我才打算去好好整理下。我觉得我看过很多遍，但是很多遍都没走心的样子。罪过~

CSS原生，写起来就比较麻烦了，很长，很长，重复的东西也很多。然后就搞了个CSS预处理器，引入一些变量、程序，然后写成树状层级，让代码很清晰，易于维护。

CSS预处理常见有几种：LESS、SASS（SCSS）、基于SASS的Compass、Blueprint、HTML5  Boilerplate、基于LESS的Twitter Bootstrap等。

 

使用中的一些特点：1）使用常规CSS样式，以可读性为准；

2）设置变量，不同预处理器有不同的规则，比如SASS用$.标识变量，变量，比如同一个颜色值就可以设置一个变量，这样只需要改一下变量值即可；

3）可以嵌套：这样就不用写很多的parent了。树状层级结构，稳稳的写好，增强可读性；

4）继承：如SASS为@extend。可以把别人的样式加载为自己的；

5）Mixins：混入。类似定义了一块CSS，包含多个CSS样式， @mixins 定义；@include 引入；

6）@import：引入一个scss文件/css，然后一起编译。。成一个文件~

 

然后就像搭积木的使用这些好玩的东西吧~

 

不过如果作为全栈工程师，你该怎么处理呢？ 使用啥呢？

有人建议这么使：SASS+Compass+Bootstrap+bootstrap-sass。编程能力+强大的底层库+丰富的UI库。。

 

 外引一个很好的介绍：SASS和Compass