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预处理器中进行样式的计算，其他编程语言的操作符基本都支持。