首先，什么是css预处理器？它存在的作用是什么？
用过css（Cascading Style Sheet 级联样式表）的人都会知道，css不是一种编程语言。你可以用它来编写页面的样式，但却无法用它来进行编程。可以理解为，css是设计师的工具，却不是程序猿的工具。
css预处理器就是为css增加了一些编程的特性，将css作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。
简单来说,css预处理器用一种专门的编程语言，进行web页面样式设计，然后再编译为正常的css文件，以供项目使用。无需考虑浏览器的兼容问题。
可以在css预处理中使用便量、简单的逻辑程序、函数等到，可以让你的css更加简洁。适应性强、可读性更佳，更易于代码的维护等。
目前为止，最优秀的css预处理器为Sass、Less、Stylus
Sass
2007年，最早最成熟的一款css预处理器语言，可以使用变量、常量、嵌套、函数、混入等功能，可以更有效地有弹性的写出css。Sass最后还是会编译出合法的css让浏览器使用，也就是说它本身的语法不太容易被浏览器识别，因为他不是标准的css格式，更像是一种极其简单的动态语言。它是用Ruby语言编写的，但两者的语法没有关系，安装环境是Ruby. 如果是ios系统，那就无须再安装Ruby，如果是windows系统，需要先安装Ruby,然后再安装sass。
安装是： gem install sass；
编译为css是 :
单文件：sass style.scss style.css
监听： sass --watch style.scss:style.css
Less
2009年开源的项目，受Sass的影响，让更多的开发者和设计师更容易上手，可以将写好的代码转化成标准的css代码，例如Bootstrap框架就使用了Less。维基百科上介绍，其实less是亚力克西斯塞利尔受Sass的影响创建的一个开源项目。安装环境为node。
客户端可以直接官网下载less源文件，引入html，在<head></head>加入如下代码：
<link rel="stylesheet/less" type="text/css" href="文件路径/styles.less"> <script src="文件路径/less.js" type="text/javascript"></script>
注意：less源文件一定要在less.js引入之前引入，这样才能保证less源文件正确编译解析。
服务器端安装：npm install less;
编译为css是 :
单文件：lessc style.less
监听： lessc style.less > style.css
Stylus
2010年产生，来源于node.js社区，主要用来给Node项目进行css预处理支持。
他被称为是一种革命性的新语言，提供一个高效、动态、和使用表达式来生成css，以供浏览器使用，同样支持缩进和css常规样式书写规则。
同样依赖于node环境。 npm install stylus
编译为css是 :
stylus -compress <some.styl> some.css
style.css
style css -out public/stylesheets
多个文件：stylus one.styl two.styl