css预处理器

css预处理器是一种语言用来为css增加一些编程的特性，无需考虑浏览器的兼容性，例如你可以在css中使用变量，简单的程序逻辑，函数等在编程语言中的一些基本技巧，可以让你的css更加简洁，适应性更强，代码更直观。
 你可以在css预处理器中声明变量，并在整个样式文件中使用，支持任何类型的变量，例如颜色，数值（无论是否有单位），文本，然后你可以任意引用该变量。

• Sass的变量使用$开头，变量名和值使用冒号隔开；
• Less的变量使用@开头，变量名和值使用冒号隔开；
• Stylus对变量名没有限制，可以是任意字符，而且变量名和值之间可以用冒号，空格隔开，需要注意的是Stylus(0.22.4)将会编译@开始的变量，但其对应的值并不会赋予该变量，所以在Stylus的变量名不要用@开头。

如果需要在css中相同的paraent引用多个元素，这是非常乏味的，你需要一遍又一遍地写parent。如：

section {
    margin: 10px;
}
section nav {
    height: 25px;
}

使用css预处理器，就可以少写 很多单词，并且父子节点的关系一目了然。

section {
    margin； 10px;
    nav {
        height: 25px;
    }
}

Mixins(混入)
  Mixins有点像函数或宏，当你的某段css经常需要在多个元素中使用时，可以定义一个mixin，然后你只需要在需要引用这些css的地方调用该mixin即可。

• Sass混入语法

@mixin error($borderWidth: 2px){
  color: #F00;
  border: $borderWidth solid #F00;
}
.generic-error {
  padding: 20px;
  @include error();
}
.login-error {
  left: 12px;
  top: 20px;
  @include error(5px);
}

• Less混入语法

.error($borderWidth: 2px){
  color: #F00;
  border: $borderWidth solid #F00;
}
.generic-error {
  padding: 20px;
  .error();
}
.login-error {
  left: 12px;
  top: 20px;
  .error(5px);
}

• Stylus混入语法

error(borderWidth= 2px){
  color: #F00;
  border: borderWidth solid #F00;
}
.generic-error {
  padding: 20px;
  error();
}
.login-error {
  left: 12px;
  top: 20px;
  error(5px);
}