首页 > SASS,Stylus,LESS这三个css预处理器你选哪个?

SASS,Stylus,LESS这三个css预处理器你选哪个?

传统的CSS写法太原始了。


大型项目、复杂的SPA比较适合这类东西。

最开始接触的是less,后来转向sass了。

因为sass的内置函数比较多,而且当时的sass有compass嘛(不过现在个人也不怎么用compass,简单为王)。

这两年sass和less也在相互学习,新版本特性方面越来越像了,比如sass也出现了局部变量等等。两者的社区也是差不多活跃的。所谓如何选择也只是语法上的区别。当然我个人更喜欢sass。

至于编译器,这三种预编译的编译器都已经有了nodejs版本,甚至还有grunt插件,so,完全不用担心还要额外装ruby之类的啦~

stylus没用过,不评价。


Scss compress


长期没有关注前段技术的我表示孤陋寡闻了……

刚才花了点时间大概看了看SASS和LESS,感觉都差不太多,当然Compass在SASS的基础上实现了许多pattern,可以让开发变得更有效率。

不过SASS是通过ruby安装的,所以是依赖与Ruby哦。less只用引入一个js就行了,使用门槛更低,我以后打算就用less了,而且我相信以后依赖于less的,类似compass的框架也会出现

wait a minute... 加几句话……

我发less也有一些不太好的地方,less.js是通过ajax获取less文件的内容,parse, 然后将parse好的内容直接插入到head里面……这效率有问题吧,而且如果客户端因为某种原因没加载js就更不爽了(比如用了firefox的noscript什么的)……到还不如使用SASS直接编译好直接下载来得爽快,如果是在生产环境而且css内容较多的情况下,还是SASS吧

当然LESS还是可以用的,用在小项目上相当不错


不要仅仅觉得 CSS 原始就想换别的,如果你的项目很简单很基础,根本无需用到这些。只有在项目很大时,才需要用这种方式提高可维护性。

相比较 SASS 比 LESS 成熟很多,不过 LESS 学习起来更快一些的,因为他一个网页就介绍完了所有的功能。SASS 要配合 Compass 才能发挥极致啊,学习成本会多一些,下个项目准备采用 Compass


目前选择的是 LESS,有很多开源项目都使用他,可以阅读学习。

他没有 SASS 要求那么严谨,比如要 mixin(中文不知道怎么翻译)时,SASS 要求被 mixin 样式需要添加 @mixin 声明,调用时也要求用 @include 调用。

不过我很喜欢 SASS 的选择器继承 @extend,这点 LESS 还没有实现,比如:
在 SASS 里:

.menu { color: #000; }
.sub-menu { @extend .menu; }

输出:

.menu, .sub-menu { color: #000; }

但在 LESS 中,只能通过 mixin 实现:

.menu { color: #000; }
.sub-menu { .menu; }

这就导致输出很多冗余的样式:

.menu { color: #000; }
.sub-menu { color: #000; }

至于 Stylus,暂时还没用过,所以无法评价。

【热门文章】
【热门文章】