Stylus学习

文章出自[译]为什么使用Stylus - 潘无处不在 - 博客园

css预处理器的出现，提高了前端开发的效率，让css可编程化。

常见的预处理器：less、sass/scss、stylus。

Less：

less外围社区环境和社区成员为他提供了大量的资源（Twitter Bootstrap）的框架；

less的第三方库LESShat,提供了一系列针对CSS3效果的混写规则，还拥有针对Photoshop的插件CSShat，能够方便的识别PSD文件生成LESS代码。

less非常容易上手使用。

less逻辑处理：less只提供了少量的逻辑处理特性，代码编写缓慢后期维护成本高。

在LESS里面没有if/else判断，所以上面的代码就无法实现。你最多能用用所谓“Guarded Mixins”的方法，基于单条表达式的判断，就像这样：

.border_and_bg ( @border_on, @border_color, @bg_on, @bg_color ) when (@border_on =true) {border:1px solid @border_color;}

Sass：

1.拥有活跃的社区，优质的资源（Gumby和Foundation）（Compass和Bourbon）

2.逻辑处理上神，像一个复杂的编程语言。

举个例子,Sass能让你写出有效的条件检查，这很有用，尤其是在混写中。

@mixin border_and_bg( $border_on, $border_color, $bg_on, $bg_color ){    @if$border_on ==true{border:1px solid $border_color;    } @else{border:0;    }    @if$bg_on ==true{        background-color: $bg_color;    } @else{        background-color: transparent;    }}

这段代码检测$border_on是否为true，为true则输出的border颜色属性值为$border_color的值。如果为false则设置border属性为0。

同时它还检测了$bg_on是否为true，为true则输出background-color值为$bg_color的值。为false的话设置background-color为transparent。

这样，根据输入的值，我们就可以输出四种不同的样式。

如果要实现Sass中同样的功能，你需要用LESS创建四条不同的混写，就像这样：

.border_and_bg ( @border_on, @border_color, @bg_on, @bg_color ) when (@border_on =true) and (@bg_on =true) {border:1px solid $border_color;  background-color: @bg_color;}.border_and_bg ( @border_on, @border_color, @bg_on, @bg_color ) when (@border_on =false) and (@bg_on =false) {border:0;  background-color: transparent;}.border_and_bg ( @border_on, @border_color, @bg_on, @bg_color ) when (@border_on =false) and (@bg_on =true) {border:0;  background-color: @bg_color;}.border_and_bg ( @border_on, @border_color, @bg_on, @bg_color ) when (@border_on =true) and (@bg_on =false) {border:1px solid @border_color;  background-color: transparent;}