为什么说学习CSS样式，建议先去学习sass、less

css预处理器：用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。
css存在的问题：语法不够强大，比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器；
没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。
所以需要预处理器提供 CSS 缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。

目前比较主流的三个处理器分别是 Less、Sass、Stylus 。

Sass、LESS和Stylus的应用对比

一、安装方法对比
1.sass的安装

首先安装ruby,建议安装到C盘中，安装过程中选择“Add Ruby executables to your PATH”

ruby安装成功后，启动Ruby的Command控制面板，输入命令

gem install sass

回车后会自动安装好Sass

2.Less的安装

分为两种：客户端和服务器端安装。

a.客户端

只需要在官网载一个Javascript脚本文件主“less.js”，然后在我们需要引入LESS源文件的HTML的中加入如下代码：

b.服务器

利用node的包管理器（npm）安装LESS，安装成功后就可以在Node环境中对LESS文件进行编译。

首先安装node,安装成功后，启动node的Command控制面板，输入命令

$ npm install less

回车后会自动安装好less

3.Stylus的安装

Stylus的安装和LESS在服务器端的安装很相似，先安装Node 。在Node的Command控制面板输入命令：

$ npm install stylus

回车后会自动安装好stylus

二、Sass、LESS和Stylus转换成css文件对比

1.sass 转换成css文件

先在项目中创建一个Sass文件，此例中将其命名为“style.scss”，并且将其放在对应的项目样式中

启动Ruby的Command控制面板，找到需要转译的Sass文件

在对应的目录下输入下面的命令：

sass style.scss style.css
sass --watch style.scss:style.css

就会生成自动“style.css”文件，并自动更新对应的CSS样式文件

2.Less 转换成css文件

在安装的Node JS环境下通过其自己的命令来进行转译。

$ lessc style.less

上面的命令会将编译的CSS传递给stdout，你可以将它保存到一个文件中：

$ lessc style.less > style.css

3.Stylus 转换成css文件

Stylus具有可执行性，因此Stylus能将自身转换成CSS。Stylus可以读取自“stdin”输出到“stdout”，因此Stylus可以像下面转译源文件：

$ stylus –compress <some.styl> some.css

Stylus也像Sass一样，同时接受单个文件和整个目录的转译。例如，一个目录名为“css”将在同一个目录编译并输出“.css”文件。

$ stylus css

下面的命令将输出到“./public/stylesheets”：

$ stylus css –out public/stylesheets

还可以同时转译多个文件：

$ stylus one.styl two.styl

如果你的浏览器安装了Firebug，那么可以使用FireStylus扩展。

$ stylus –firebug

三、变量的处理 的 对比

1、Less 变量的处理方式
Less：变量处理方式–懒加载，所有 Less 变量的计算，都是以这个变量最后一次被定义的值为准。

Less

@size: 10px;
.box { width: @size; }
@size: 20px;
.ball { width: @size; }

输出：
.box { width: 20px; }
.ball { width: 20px; }

2、Stylus变量的处理方式

size = 10px
.box
width: size

size = 20px
.ball
width: size

输出：

.box {
width: 10px;
}
.ball {
width: 20px;
}

3、Sass的变量处理方式

Sass的变量处理方式和Stylus相同，变量值输出时根据之前最近的一次定义计算。这其实代表了两种理念：Less 更倾向接近 CSS 的声明式，计算过程弱化调用时机；而 Sass 和 Stylus 更倾向于指令式。

如果在Less中引入第三方样式库，可以通过重新配置变量来改变样式

优点：stylus和sass这样的处理会不容易受多个第三方库变量名冲突的影响，因为一个变量不能影响在定义它以前的输出样式

四、css后处理器

css后处理器是对css进行处理，并最终生成css预处理器，它属于广义上的css预处理器

举例：css压缩工具（clean-css）,Autoprefixer(以Can I Use上的浏览器支持数据为基础，自动处理兼容问题)

Autoprefixer:

标准css如下：
.container {
display: flex;
}
.item {
flex: 1;
}

兼容处理后如下：
.container {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.item {
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}

优点：使用Css语法，容易进行模块化，贴近Css的未来标准
缺点：逻辑处理能力有限
框架举例
PostCss:是一个基于JS插件的转换样式的工具。PostCSS插件可以像预处理器，它们可以优化和Autoprefix代码；可以添加未来语法；可以添加变量和逻辑；可以提供完整的网格系统；可以提供编码的快捷方式等等