为什么使用Stylus

CSS预处理器的出现大大的提高了前端开发的效率和逼格，它让CSS可编程化。LESS和Sass/SCSS是两种最为常见的预处理器，拥有大量的用户基数，数目庞杂的第三方库。然而，还有一种预处理器并未引起足够的重视，Stylus。

现在，我们来说说为什么Stylus很棒，为什么使用它，为什么它将会变成你的首选预处理器。

---

LESS、Sass很棒

具体介绍Stylus如何工作之前，我们先说说LESS、Sass给CSS带来了什么好处，然而却为什么不选择它们。

预处理器的基石

每种预处理器都包含了变量、混写（mixins）、嵌套和扩展，以及不同的度量单位、逻辑运算符和函数。通过这些你可以抽象出许多关键不疯，并重复使用，良好的逻辑和更少的代码能让你从书写CSS中获得前所未有的体验。

然而，最终促使我选择使用哪个预处理器原因就是它们之间细微的不同。

LESS：很棒

除了一些基本功能外，LESS外围的社区环境以及社区成员提供的大量资源是它的最大优势。想必没有一个前端工程没听说过Twitter Bootstrap的框架，这或许也是导致大部分人用LESS的原因之一。

另外一个使LESS脱颖而出的原因就是LESS的第三方库，LESShat，它提供了一系列针对CSS3效果的混写规则，并且还拥有针对Photoshop的配套插件CSShat，能够方便的识别PSD文件并生成LESS代码。假如你的Photoshop文件很复杂，那么这两个工具将会给你的工作流程提供强有力的支持。

还有一个重要因素或许是许多人发现它非常容易上手且易于使用。你可以仅用一个简单的Javascript文件编译它，也可以用IDE内置的编译器，还可以用nodejs在任何机器上编译它。

LESS：为什么不用

首先，我更倾向于写自己的代码而不是用第三方框架，并且我现在正在设计更简单的Photoshop，同时尽可能在浏览器中动态的设计，这有利于实时查看效果。所以，对我来说，上述提到的优势还不足以促使我去选择使用它。

但是最重要的原因其实是，LESS在逻辑处理上与另外两个预处理器相比真是大相径庭。

LESS只提供了少量的逻辑处理特性，以至于我们不得不为实现某些逻辑而增加代码的书写，这进一步导致了开发变缓以及后期维护成本的增加。

虽然LESS提供了一些逻辑处理，但是相比Stylus和Sass/Scss而言实在是太有限了。接下来我就会告诉你有限在哪里。

Sass:非常棒

Sass同样拥有活跃的社区，优质的资源。LESS有Twitter Bootstrap，Sass有Gumby和Foundation。LESS有LESShat，Sass有Compass和Bourbon。

但是相比LESS的逻辑处理能力而言，Sass简直就是神。在逻辑处理上，LESS勉强只能称得上为CSS增强写法，而Sass完全像一个复杂的编程语言。

举个例子,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。

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

然而，在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;
}

由于没有if/else函数，也就对随后检查@bg_on的值无能为力，也就不能在同一个混写当中根据可变的值设置border属性。

如果要实现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;
}

这仅仅只是检查两个值，当你的代码越来越复杂，需检查的值越来越多，这种写法将会变得非常丑陋。处理好每条规则的顺序并一眼分辨它们也变得难上加难。

对比Sass，有木有发现Sass的逻辑处理能让你coding更加轻松，生活更加美好。Sass同样提供了超赞的流程控制，像：@for，@each和@while。

最后，在LESS中令人称赞的函数，同样能方便的Sass化。像这样：

@function function-name($parameter) {
  @return $dosomething + $parameter / $somethingelse;
}

这些逻辑函数让你有可能创建自己的布局引擎，用em而不是px，颜色定义，以及把大量的定义用法从一个项目转移到另一个项目，等等。

从我看到的听到的，以及我个人的使用经验来判断，人们使用Sass而不是LESS的很大原因就在于，它拥有强大逻辑处理能力。

Sass：还是不用

显然，LESS由于逻辑处理能力弱出局了，剩下Sass和Stylus，这两个都有一系列强有力的特性支撑。

然而，我选择Stylus，因为它既有Sass的强大，也具有LESS的易用性。

Stylues能做到所有Sass能做的，或许还更简单，却仅需要Javascript或者Node.js就能编译。它有的使用方法非常顺滑且简单，并且它优美简洁的语法也是我所钟爱的。

对我来说，最大的痛点就是用Sass的话必须运行Ruby on Rails并且和gems打交道。我的任何项目中都不会用到Ruby，我要为了使用Sass冒着装Ruby而导致的连接错误或者安装错误并去解决它显然有点得不偿失。

我非常好奇那么非Rubyer，为了使用Sass而装Ruby，真是有Geek精神。

假如我为了使用Sass而装了Ruby，但我的工作依然需要Node.js，依然需要NPM安装Glup，去监视文件的变化，压缩静态文件等等，依然需要安装Bower来管理其它的包。

所以，如果一个编译器像Stylus拥有强大的逻辑处理能力，并且与我平时所用的工具高度配合，这就是我选择它的原因。

很多人发现使用Sass需要历经复杂的Ruby安装，从而导致了它们使用LESS。现在，Stylus在给你强大逻辑处理的同时，也给了你像LESS一样简单易用的安装和编译方式。

抛开Ruby复杂的安装方式，仅就Sass强大的逻辑处理能力而言我可能也不会选择它。Stylus特别的工作方式以及易读的语法，相比LESS和Sass而言更加简洁、灵活和顺畅。

现在，我来告诉你为什么我选择Stylus，并且你也会乐意去选择。

用Stylus，现在

正如上所说，我选择Stylus因为：

• 强大的逻辑处理能力
• 仅仅用Node.js / JavaScript (no Ruby)就能编译
• 用Glup和Bower用到Nodejs，同样Stylus也需要，不会增加而外的负担
• 精简、灵活的语法
• 方便易用的特性

那么我来介绍一点stylus的用法，来作证为什么选择它。

很大一部分原因是因为我能用到平时项目中已经存在的工具处理Stylus，这些工具包括Stylus也能很好的与我所用的IDE协同。

Stylus语法

Stylus灵活的语法简直让我爱不释手。

在LESS里面你必须按照传统的方式书写，{}、：、；一个都不能少

Sass/SCSS给了你更多的选择：

• SCSS编译时提供给你更多的选择，那么你就可以用常规的CSS写法或者上面的写法
• Sass里面可以完全抛弃{}、：、；，但是在这个文件里你也不能用常规的写法了

Stylus相对而言就灵活很多，不必去设置任何编译选项就能够兼容这两种写法

• 只要你觉得舒服完全可以用{}、：、；
• 当你不用的时候，只要使用适当的缩进就能达到效果
• 你也可以在同一个文件中混合使用这两种方式

以下写法都是合法的：

.my-style{
  color: #000;
  background-color: #fff;
  border: 1px solid #ccc;
}

.my-style
  color #000;
  background-color #fff;
  border 1px solid #ccc;

.my-style
  color: #000
  background-color: #fff
  border: 1px solid #ccc

.my-style
  color #000
  background-color #fff
  border 1px solid #ccc

只有Stylus能完全省略这些标点符号，尽情发挥你的想象力，想怎么写就怎么写吧。

当你省略掉这些标点符号后，你会惊奇的发现你的代码会变得如此美妙。coding过程中，思维也变得无比的顺畅，高亮提示也进一步提高代码的可读性。

同时，编译器也是很人性滴。你可能出于某种理由要用常规的CSS写法，来让你的代码更有组织性，尽管用吧。假如你不慎漏写了一个分号，OK，没问题，没人会知道的。

Stylus变量，混写，流程控制和函数

你已经看到在LESS和Sass中，变量、混写、流程控制和函数是怎么样的。在我看来，Stylus中的方式更加可看、可读、可用。

在LESS里面，变量必须加上@前缀。在Sass里面，必须加上$前缀。在Stylus里面，不用加任何前缀。当然如果你喜欢你可以随便用$，但是@是内置的保留字，所以不能用它。

同样，混写、流程控制和函数不用加任何前缀。

在LESS里，一个混写必须按照像常规CSS的写法去写，并且LESS还没有流程控制和自定义函数。

在Sass里，混写必须以@mixin开头，并且使用的时候要用@include，条件控制用@if和@else,函数要以@function开头，并在函数内部有一行@return

这些条条框框在stylus里面通通没有，你可以很自然的写这些，就像写常规代码一样。早期我用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: 1px solid $bg_color;
    } @else {
        background-color: transparent;
    }
}

@function function-name($parameter) {
  @return $dosomething + $parameter / $somethingelse;
}

使用的时候这样：

.callem {
    @include border_and_bg(true, #000, true, #fff);
    font-size: function-name( 6 );
}

现在，在Stylus中这样写：

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

function-name(parameter)
  dosomething + parameter /somethingelse

.callem
    border_and_bg true #000 false #fff
    font-size function-name(6)

有木有感觉看起来和读起来都非常随意，并且编译后生成的代码也保持着简单易读。

当调用border_and_bg的时候，就像通常写CSS的方法，不用大括号、分号、冒号。当然你也可以使用这些标点符号，这取决于你。

一些妙招

Stylus拥有成吨的超赞特性，需要你自己去发现。

http://learnboost.github.io/stylus/

在此，有两个特性我必须要说说。

参数省略法

参数省略法允许你传入未定义个数的参数。你可以先传入一些确定的值参数，然后通过使用args...和args.获取剩余的值。例如：

padded_box(box_sizing,args...)
  box-sizing box_sizing
  padding args

.abox
  padded_box border-box 5px 10px

.anotherbox
  padded_box content-box 20px

//编译后

.abox {
  box-sizing: border-box;
  padding: 5px 10px;
}
.anotherbox {
  box-sizing: content-box;
  padding: 20px;
}
  

属性引用

有时候你可能会在一段CSS代码内重复使用某个值，如果专门为此设置一个变量，未免有点浪费资源。

我们有个大宝剑，通过它你可以方便的获取已经声明属性的值。例如:

.onemorepaddedbox
  padding-left 20px
  padding-right 30px
  width 1200px - @padding-left - @padding-right

  //编译后

.onemorepaddedbox {
  padding-left: 20px;
  padding-right: 30px;
  width: 1150px;
}

你所需要做的只是用一个@标记符就行，Stylus会自动在本样式中寻找声明，找不到的话就去向上查找父元素，找不到继续向上，当查到根节点依然没有的话就返回“null”

总结

总而言之使用Stylus，不会让你后悔。