请描述你曾使用过的css预处理器的优缺点

主要从基本语法、变量、嵌套、混入(mixin)，继承，函数，@import，运算符，逻辑控制等方面描述

1）基本语法：

LESS的基本语法和CSS差不多，SASS（Sass依赖Ruby，安装SASS前要安装Ruby）和Stylus都可以利用缩进代替花括号，并且空格有重要的意义。SASS保存为".sass"是缩进格式，保存为".scss"是非缩进格式。SASS一般使用".scss"扩展名。LESS的扩展名为".less"，Stylus的扩展名为".styl"

2）变量：CSS预处理器中可以定义变量，并且可以在样式表中使用，变量类型没有限制，这样就可以一定程度上减少CSS中无法避免的重复问题

LESS变量名必须以@符号开头，变量名和变量值之间以冒号隔开。有个问题是@规则在CSS中算是一种原生的扩展方式，变量名用@开头很可能会和以后CSS中的新@规则冲突

@orange: #feb914；
header {
    background-color: @orange;
} 

SASS变量名必须以$开始，变量名和变量值之间以冒号隔开

$orange: #feb914；
header {
    background-color: $orange;
} 

Stylus对变量名没有任何限定，变量名与变量值之间可以用冒号、空格和等号隔开

变量作用域：变量都是有作用域的，查找变量的顺序是先在局部定义中查找，如果找不到，则逐级向上查找。Stylus和SASS行为相同，变量的计算以变量最近一次的定义为准。Less以这个变量最后一次的定义的值为准

//less
@size: 40px;
.content {
    width: @size;
}
@size: 60px;
.container {
    width: @size;
}
 
//编译输出
.content {
    width: 60px;
}
.container {
    width: 60px;
}
 
//sass
$size: 40px;
.content {
    width: $size;
}
//编译输出
$size: 60px;
.container {
    width: $size;
}
 
.content {
    width: 40px;
}
.container {
    width: 60px;
}

变量插值：预处理器中定义的变量不仅可以用作属性值，还可以用作选择器，属性名等，这就是变量插值

变量名插值：Less中支持以@@var的形式引用变量，即该变量的名字是由@var的值决定的

选择器插值：

//以类选择器为例
//less，在Less中，通过选择器插值生成的规则无法被继承。
@way: new;
.@{way}-task {
    font-size: 18px;
}
 
//sass插值
$way: new;
.#{$way}-task {
    font-size: 18px;
}
 
//stylus
way: new;
.{way}-task
    font-size 18px
 
//输出结果都是下面的形式
.new-task {
    font-size: 18px;
}

@import插值

//Sass中只能在使用url()表达式时进行变量@import插值
$device: mobile;
@import url(styles.#{$device}.css);
 
//Less中可以在字符串中进行插值：
@device: mobile;
@import "styles.@{device}.css";
 
//Stylus中没有@import插值，但是可以利用其字符串拼接的功能实现
device = "mobile"
@import "styles." + device + ".css"

属性名插值：三个预处理器均支持属性名插值，使用方式且和上述插值类似

3）嵌套：在相同的父元素中选择多个子元素，需要一遍又一遍地写父元素，如果用CSS预处理器就可以不用重复写父元素，并且父元素和子元素的关系一目了然

三种预处理器的嵌套语法是一致的，引用父级选择器的标记&也相同。除了&，Sass和Stylus还分别用@at-root和"/"符号作为嵌套时根规则集的选择器引用

4）混入（mixin）：当某段CSS经常需要在多个元素中使用时，可以为这些共用的CSS定义一个mixin，然后只需要在需要引用这些CSS地方调用该mixin即可。三种预处理器的mixin使用方式的差异比较大