Less/Sass/Scss的区别

Scss其实是Sass的改进版本

Scss是Sass的缩排语法，对于写惯css前端的web开发者来说很不直观，也不能将css代码加入到Sass里面，因此Sass语法进行了改良，Sass 3就变成了Scss(sassy css)。与原来的语法兼容，只是用{}取代了原来的缩进。

Less环境较Sass简单

Sass的安装需要安装Ruby环境，Less基于JavaScript，需要引入Less.js来处理代码输出css

变量符不一样，Less是@，而Sass是$，而且变量的作用域也不一样。

Sass没有局部变量，满足就近原则。Less中{}内定义的变量为局部变量。

Less没有输出设置，Sass提供4种输出选项 输出样式的风格可以有四种选择，默认为nested nested：嵌套缩进的css代码 expanded：展开的多行css代码 compact：简洁格式的css代码 compressed：压缩后的css代码

Sass支持条件语句，可以使用if{}else{},for{}循环等等。而Less不支持。

Less与Sass处理机制不一样 Less是通过客户端处理的，Sass是通过服务端处理，相比较之下Less解析会比Sass慢一点

Sass和Less的工具库不同 Sass有工具库Compass, 简单说，Sass和Compass的关系有点像Javascript和jQuery的关系,Compass是Sass的工具库。在 它的基础上，封装了一系列有用的模块和模板，补充强化了Sass的功能。

Less有UI组件库Bootstrap, Bootstrap是web前端开发中一个比较有名的前端UI组件库，Bootstrap的样式文件部分源码就是采用Less语法编写，不过Bootstrap4也开始用Sass编写了。