CSS预处理器

CSS预处理器为CSS增加了编程的特性，如使用变量，简单的逻辑程序，函数等，再编译成css文件，供项目使用。好处：简洁，适应性强，可读性强，易于代码维护。

• Sass:两套语法规则：1. 用缩进作为分割符来区分代码块，可以省略{ } 和 ； 2. 用 { } 作为分隔符 （又称Scss）
• Less：使用{ } 样式嵌套。
• Stylus：主要用来给Node项目进行CSS预处理支持。Stylus同时支持缩进和CSS常规样式书写规则。

特性

变量

sass声明变量 $变量名：变量值

$mainColor:#943;  //声明变量   
color: $mainCOlor; // 使用变量

less声明变量 @变量名：变量值

@mainColor:#943;  //声明变量     
color: @mainCOlor; // 使用变量

stylus声明变量 变量名 = 变量值 $变量名 = 变量值；

$mainColor = #943;   mainColor = #943;  //声明变量     
color: $mainCOlor;  color: mainCOlor // 使用变量

注意:如果我们使用“@”符号开头来声明（0.22.4）变量，Stylus会进行编译，但其对应的值并不