1、背景
CSS不是一种编程语言，可以用它开发网页样式，但是没法用它编程，它没有自己的变量、简单的逻辑程序、函数及其他编程语法，只是一行行单纯的属性描述，写起来相当费事，而且代码难以组织和维护。
为了加入一些编程元素，让CSS能像其他程序语言一样可以做一些预定的处理，CSS预处器应运而生。
2、CSS预处理器
CSS预处理器用一种专门的编程语言，进行样式设计，然后再编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS增加一些编程的特性，无需考虑浏览器的兼容性问题，使用变量、简单的逻辑程序、函数等在编程语言中的一些基本特性，让CSS 更加简洁、适应性更强、可读性更佳，更易于代码的维护。
3、CSS预处理器框架
使用最为普遍的三款CSS预处理器框架分别是 SASS、LESS和Stylus。
1) SASS：最早、最成熟的CSS预处理器，拥有Ruby社区的支持和compass这一最强大的CSS框架，目前受LESS影响，已经进化到了全面兼容CSS的SCSS。SASS使用.sass扩展名。
2) LESS：受SASS的影响较大，但又使用CSS的语法，更容易上手，在Ruby社区之外支持者远超过SASS，其缺点是比起SASS来，可编程功能不够，优点是简单和兼容CSS。LESS影响了SASS演变到SCSS，著名的Twitter Bootstrap就是采用LESS做底层语言的。LESS使用.less扩展名。
3) Stylus：来自Node.js社区，主要用来给Node项目进行CSS预处理，在Node.js社区内有一定支持者，但在广泛意义上人气还完全不如SASS和LESS。Stylus使用.styl扩展名。Stylus功能上更为强壮，和JavaScript联系更加紧密。
LESS是受SASS启发而开发的工具，为什么要开发SASS的替代品？
原因：语法。SASS支持老的缩进式的语法（不带花括号的语法），因此程序员需要学习一种新的语法；LESS能与CSS无缝地紧密结合在一起，能够让开发者从已有CSS文件平滑地过渡到LESS，而不需要像SASS那样将CSS文件转换成SASS格式。
5、CSS预处理器的编程特性
1) 变量
可以在CSS预处理器中声明变量，可以在整个样式单中任意引用该变量，支持任何类型的变量，如颜色、数值、文本。
① SASS的变量必须是$开始，然后变量名和值使用冒号隔开；
② LESS的变量必须是@开始；
③ Stylus对变量名没有任何限定，可以是$开始，也可以是任意字符，需要注意的是Stylus (0.22.4) 将会编译@开始的变量，但其对应的值并不会赋予该变量，换句话说，Stylus的变量名不要用@开头。
2) 嵌套
① 结构嵌套：所有后代元素的CSS样式单都可以放置在父元素的CSS样式单中。
② 属性嵌套：复合属性的CSS样式单可以拆开进行嵌套设置。
3) 混入
① 通过@mixin Mixins名(参数:参数值)的方式将相同的样式风格定义成一个模块，参数:参数值可选；
② 在需要使用的地方通过@include Mixins名(参数值)的方式将定义好的模块调用进来，参数值可选。
4) 继承
在写CSS时，若多个元素具有同样的样式，往往把多个元素相同的样式写在一起。
① 通过CSS预处理器，可以把相同的样式抽取出来，并为其定义为一个类，把相同的样式写在这个类中。
② 在需要使用的地方通过@extend来调用。
5) 导入
通过 @ import CSS文件名的方式可以导入CSS文件，效果跟普通的CSS导入一样，但需要注意：导入的CSS文件中定义的变量、混入等信息也将会被引入到主样式文件中，因此要避免它们互相冲突。
6) 函数
CSS 预处理器一般都会内置一些颜色处理函数用来对颜色值进行处理，如加亮lighten()、变暗darken()、改变色调adjust-hue()、增加饱和度saturate()、减少饱和度desaturate()、灰度转换greyscale()等。
7) 操作符
可以直接在CSS预处理器中进行样式的计算，其他编程语言的操作符基本都支持。