Sass、LESS 和 Stylus区别总结

3,651 阅读2分钟

历史:

  • SASS2007年诞生,最早也是最成熟的CSS预处理器,拥有ruby社区的支持和compass这一最强大的css框架,目前受LESS影响,已经进化到了全面兼容CSS的SCSS。
  • LESS2009年出现,受SASS的影响较大,但又使用CSS的语法,让大部分开发者和设计师更容易上手,在ruby社区之外支持者远超过SASS,其缺点是比起SASS来,可编程功能不够,不过优点是简单和兼容CSS,反过来也影响了SASS演变到了SCSS的时代,著名的Twitter Bootstrap就是采用LESS做底层语言的。
  • Stylus,2010年产生,来自Node.js社区,主要用来给Node项目进行CSS预处理支持,在此社区之内有一定支持者,在广泛的意义上人气还完全不如SASS和LESS。

链接:https://www.zhihu.com/question/20300388/answer/18155157

LESS & Sass

LESS是受Sass启发而开发的工具,它列出了如下开发的理由:

“为什么要开发一个Sass的替代品呢?原因很简单:首先是语法。Sass的一个关键特性是缩进式的语法,这种语法可以产生柱式外观的代码。但是你需要花费时间学习一门新的语法以及重新构建你现在的样式表。

LESS给CSS带来了很多特性,使得LESS能够和CSS无缝地紧密结合在一起。因此,你可以平滑地由CSS迁移到LESS,如果你只是对使用变量或者操作感兴趣的话,你不需要学习一整门全新的语言。”

Stylus

Stylus相对前两者较新,可以看官方文档介绍的功能。

1.来自NodeJS社区,所以和NodeJS走得很近,与JavaScript联系非常紧密。还有专门JavaScript API:learnboost.github.io/stylus/docs…

2.支持Ruby之类等等框架

3.更多更强大的支持和功能

以 stylus 的角度来说,stylus 更加注重对 javascript( learnboost.github.io/stylus/docs… ) 的利用。 当用户觉得写 stylus 函数遇到了过于复杂或者无法测试,stylus语法不支持等需求时, 也可以直接用 js 来实现这个函数并且在 stylus 中调用。

其次从编译器源码上来看:stylus 应该比 less.js 更有条理, 感觉如果未来社区添加功能的话,stylus 的源码添加起功能来会更简单,同样,目前 stylus 的功能也更复杂。

stylus 和 sass 另一个区别在于 sass 本身会建议,以下划线(_) 打头的文件在静态资源打包的时候不会被编译成 .css 文件【只是作为一种 import 存在】。而 stylus 没有这方面的规范。

同时写过 stylus 和 sass, 就语法简洁来看, stylus 在这方面占了很大的便宜。