前端面试题：less, sass,styus三者的区别

变量
Sass声明变量必须是「$」开头，后面紧跟变量名和变量值，而且变量名和变量值需要使用冒 号：分隔开。
Less声明变量用开头，其余等同Sass。
Stylus中声明变量没有任何限定，结尾的分号可有可无，但变量名和变量值之间必须要有「等 号」。
作用域
Sass：三者最差，不存在全局变量的概念
Less：最近的一次更新的变量有效，并且会作用于全部的引用！
Stylus： Sass的处理方式和Stylus相同，变量值输出时根据之前最近的一次定义计算，每 次引用最近的定义有效；
嵌套
三种CSS预编译器的「选择器嵌套」在使用上来说没有任何区别，甚至连引用父级选择器的 标记&也相同
继承
Sass和Stylus的继承非常像，能把一个选择器的所有样式继承到另一个选择器上。使用
「@extend」开始，后面接被继承的选择器。Stylus的继承方式来自Sass,两者如岀一辙。Less 则又「独树一帜」地用伪类来描述继承关系；
导入 @Import
Sass中只能在使用url()表达式引入时进行变量插值
$device： mobile；
@import url (styles. #{$device}. css)；
Less中可以在字符串中进行插值
@device： mobile；
@import "styles. @{device}.css"；
Stylus中在这里插值不管用，但是可以利用其字符串拼接的功能实现
device = "mobile"
^import "styles. " + device + css"
总结
Sass和Less语法严谨、Stylus相对自由。因为Less长得更像css,所以它可能学习起来更 容易。
Sass 和 Compassx Stylus 和 Nib 都是好基友。
Sass和Stylus都具有类语言的逻辑方式处理：条件、循环等，而Less需要通过When等关 键词模拟这些功能，这方面Less比不上Sass和Stylus
Less在丰富性以及特色上都不及Sass和Stylus,若不是因为Bootstrap引入了 Less,可 能它不会像现在这样被广泛应用(个人愚见)