[译]为何使用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，不会让你后悔。