[譯]爲何使用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，不會讓你後悔。