一、是什么
Css作为一门标记性语言，语法相对简单，对使用者的要求较低，但同时也带来一些问题
需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少Css编写经验而很难写出组织良好且易于维护的Css代码
Css预处理器便是针对上述问题的解决方案
预处理语言
扩充了Css语言，增加了诸如变量、混合（mixin）、函数等功能，让Css更易维护、方便
本质上，预处理是Css的超集
包含一套自定义的语法及一个解析器，根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的Css文件
二、有哪些
Css预编译语言在前端里面有三大优秀的预编处理器，分别是：
sass
less
stylus
sass
年诞生，最早也是最成熟的Css预处理器，拥有Ruby社区的支持和Compass这一最强大的Css框架，目前受LESS影响，已经进化到了全面兼容Css的Scss文件后缀名为.sass与scss，可以严格按照sass的缩进方式省去大括号和分号。
less
年出现，受SASS的影响较大，但又使用Css的语法，让大部分开发者和设计师更容易上手，在Ruby社区之外支持者远超过SASS
其缺点是比起SASS来，可编程功能不够，不过优点是简单和兼容Css，反过来也影响了SASS演变到了Scss的时代
stylus
Stylus是一个Css的预处理框架，年产生，来自Node.js社区，主要用来给Node项目进行Css预处理支持
所以Stylus是一种新型语言，可以创建健壮的、动态的、富有表现力的Css。比较年轻，其本质上做的事情与SASS/LESS等类似
三、区别
虽然各种预处理器功能强大，但使用最多的，还是以下特性：
变量（variables）
作用域（scope）
代码混合（mixins）
嵌套（nestedrules）
代码模块化（Modules）
因此，下面就展开这些方面的区别
基本使用
less和scss
.box{
display:block;
}
sass
.box
display:block
stylus
.box
display:block
嵌套
三者的嵌套语法都是一致的，甚至连引用父级选择器的标记也相同
区别只是Sass和Stylus可以用没有大括号的方式书写
less
.a{
.b{
color:red;
}
}
变量
变量无疑为Css增加了一种有效的复用方式，减少了原来在Css中无法避免的重复「硬编码」
less声明的变量必须以
开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒号:分隔开red:#c00;strong{
color:
red;}
sass声明的变量跟less十分的相似，只是变量名前面使用
开头$red:#c00;
strong{
color:$red;
}
stylus声明的变量没有任何的限定，可以使用$开头，结尾的分号;可有可无，但变量与变量值之间需要使用=
在stylus中我们不建议使用
符号开头声明变量red=#c00
strong
color:red