Less 与 Sass 的对比

前言:

目前,较为出名的三大CSS预处理器:lesssassstylus,相信大家都不陌生,很多项目都使用预处理器来编译CSS样式,比如 bootstrap。在 bootstrap 4.x 版本之前,都是使用 less 预处理器,但是在4.x版本之后,bootstrap 已经把 less 换成了 sass。。。

疑问:

既然有三款预处理器,那么哪一款预处理器更适合于我们呢?他们之间有什么差异呢?以下是我个人整理的特性对比表格,若有错误的地方,请发邮件至codes.artisan@gmail.com指出。

特性对比:

特性 less sass
学习成本 略高
变量 * 支持,以 @ 符号开头 支持,以 $ 符号开头
mixin * 支持并以混合模式使用 支持(语法限定较为严格)
嵌套规则 * 支持 支持
运算 * 支持 支持
逻辑判断 支持但不直观 docs 支持且比较直观 docs
循环 支持但不直观 docs 支持且比较直观 docs
默认变量 支持但比较麻烦 docs 支持且简单易用 docs
继承 支持 支持
变量作用域 全局 全局和局部 Understanding Variable Scope in Sass
自定义函数 需要借助插件 less-plugin-functions 支持 docs

以上的表格仅为一些较大的差异,具体细节请查阅文档: less sass

结语:通过上面的表格对比,可以得出结论,less 学习成本低,但是在使用一些特性的时候,并不是那么直观(相对于编程中常用的语法来说:if else each 等),而 sass 学习成本相对于 less 来说学习成本更高一些,但是它的语法更直观、更贴近于现有的编程语言。

参考文献: