Stylus - 讓 CSS 自由到「木有下限」

01-30

Rails 帶來了 SASS，然後提出 CSS Preprocessor 的理念，隨後，JavaScript 社區說，瀏覽器不能直接支持，然後搞出了 LESS。可是 LESS 總有些奇奇怪怪的地方，連著名的 Twitter Bootstrap 也放棄 LESS 獨佔，開始維護官方的 SASS 版本。

因為相比而言，SASS 確實會比 LESS 更加的利於管理，更加的靠近編程的思維。不過，對 Ruby 環境的依賴，總是會讓部分人不那麼爽，於是本文的主角出現 Stylus — expressive, robust, feature-rich CSS preprocessor，這個毫無下限的 CSS Preprocessor 。包含 LESS 和 SASS 的幾乎全部特性就不說了，而且，還加入很多特別的東西。

## 語法糖

$color = red;nndiv,n.test2n#testn height: 100pxn width: @height;n border 1px solid $colorn border-color $colorn background: @border-colorn border-radius: 5px;n &.test {n color: red;n border-radius: top 5px;n }n &.testn color: redn

還算正常的嵌套，

然後，毫無下限的無視標點的行為，有沒括弧無所謂，有沒分好無所謂，居然連冒號也可以省掉，然後還能同時存在，唯一要做的不過是保證縮進對齊；

變數除了全局定義外，還可以自屬性的引用；

甚至是自定義擴展 CSS 的屬性，比如上面的 border-radius：top 5px，這種無（贊）節（爆）操（了）的行為，當然這個是需要 nib - CSS3 extensions for Stylus 的支持，不過也可以自己寫一些規則。

div,.test2,#test{height:100px;width:100px;border:1px solid #f00;border-color:#f00;background:#f00;-webkit-border-radius:5px;border-radius:5px;}ndiv.test,.test2.test,#test.test{color:#f00;-webkit-border-top-left-radius:5px;border-top-left-radius:5px;-webkit-border-top-right-radius:5px;border-top-right-radius:5px;}ndiv.test,.test2.test,#test.test{color:#f00}n

同樣，和 LESS 和 SASS 中 Mixin 的用法類似，可以通過 .foo($var1,$var2) 調用。另外也可以和上面 border-radius 那樣偽裝成 CSS 一樣的用法，

-pos(type, args)n i = 0n position: unquote(type)n {args[i]}: args[i + 1] is a unit ? args[i += 1] : 0n {args[i += 1]}: args[i + 1] is a unit ? args[i += 1] : 0nnabsolute()n -pos(absolute, arguments)nnfixed()n -pos(fixed, arguments)n

可以自己定義一些方法，類似於 javascript 的 apply(this, arguments)

然後就能想這樣直接使用，看著就像是 CSS 的屬性吧。

#promptn absolute: top 150px left 5pxn width: 200pxn margin-left: -(@width / 2)nn#logon fixed: top leftn

將轉換為

#prompt {n position: absolute;n top: 150px;n left: 5px;n width: 200px;n margin-left: -100px;n}n#logo {n position: fixed;n top: 0;n left: 0;n}n

然後可以在這裡，http://learnboost.github.io/stylus/try.html，在線嘗試下。

其他的和 LESS 大同小異了，比如對顏色的 darken() lighten() 等常用用法，可以參見 Built-in Functions，循環判斷的使用，和主流編程語言沒啥區別了，更加的方便做編程。

還有一些，如 @block 、 @extend ，和 SASS 的 @include 、@extend 一致，

然後有個特殊性 @require，其實是和 @import 一樣，但是是僅引入一次。這特性，用來和模版一起使用，貌似做按需組裝是可行的。

## 約定

Stylus 給了用戶太多可玩的地方，也給了太多的自由，所以是需要做一些限制約定的，在團隊協作中。

標點的省略到什麼程度，一定要考慮到團隊之前的習慣
對 CSS 屬性的擴展，不要隨意進行，除了上面提到的 absulote，fixed 這種與 top/right/bottom/left 常見搭配外，其他沒有太大擴展的必要，擴展越多，坑越多。
代碼的組織，特別是對於這種沒下限的，靠縮進的，最好把代碼細分，不要在一個文件里寫太多代碼。

然後，用好 Gulp 或者 Grunt，可以讓工作更效率。

H.F.