摘要：另外這個(gè)方法還用到了內(nèi)置函數(shù)，和中的方法一樣，很容易使用，除了它還有函數(shù)。不過(guò)好像還在使用低版本的，比如一些內(nèi)置函數(shù)就不可用。

Stylus似乎并不是很有名，以至于很多人不知道它，但提到SASS相信有不少人聽(tīng)說(shuō)過(guò)甚至使用過(guò)很長(zhǎng)時(shí)間。其實(shí)無(wú)論是LESS、SASS還是Stylus甚至是Absurd這些預(yù)處理工具，都是對(duì)CSS的一種延伸和強(qiáng)化。出現(xiàn)這些工具的原因很簡(jiǎn)單，CSS本身只是一種描述性質(zhì)的東西，甚至它不能算是語(yǔ)言而是樣式表，所以我們需要一個(gè)有條件語(yǔ)句和變量甚至是函數(shù)的東西去動(dòng)態(tài)生成CSS代碼來(lái)達(dá)到提高效率和增強(qiáng)可維護(hù)性的目的。

本文主要以Stylus語(yǔ)法本身和簡(jiǎn)單的使用為主要內(nèi)容，它的目的是介紹和簡(jiǎn)單指南。將不會(huì)過(guò)多涉及Javascript的API調(diào)用等問(wèn)題。

官方的介紹非常簡(jiǎn)短而精煉：

  
Expressive, dynamic, robust CSS

富有表現(xiàn)力的動(dòng)態(tài)的強(qiáng)壯的CSS，它反應(yīng)了一些主要特點(diǎn)。

首先Stylus相較于SASS更加簡(jiǎn)潔，甚至冒號(hào)也都可以省略，初學(xué)Stylus時(shí)感到它太神奇了，僅僅以空格分隔屬性名和多個(gè)屬性值就可以生成想要的CSS，而且還可以拼接字符串等等。與此同時(shí)，類似Ruby或Python完善的縮進(jìn)語(yǔ)法，Stylus在簡(jiǎn)約自由中有效的防止了語(yǔ)法歧義。

body
  border 10px*.1 soli+"d" darken(red,10%)

// =>
body {
    border: 1px solid #e60000;
}

其次是動(dòng)態(tài)，這正是其精髓所在，Stylus由Javascript編譯，其結(jié)構(gòu)語(yǔ)句也和Javascript相差不多，前端人員可以很輕松的上手。雖然這方面Absurd是一個(gè)極端，但Stylus較之LESS則要優(yōu)越不少，不僅僅是可定義變量，如Javascript般的條件語(yǔ)句和循環(huán)語(yǔ)句也為Stylus帶來(lái)各種可能，加上豐富的內(nèi)置函數(shù)，可以輕松判斷和操作各種變量。而利用這樣的動(dòng)態(tài)性，就可以寫出非常強(qiáng)壯的CSS以滿足不同環(huán)境和條件下的需要。

pos(type, args)
  i = 0
  position unquote(type)
  {args[i]} args[i + 1] is a "unit" ? args[i += 1] : 0
  {args[i += 1]} args[i + 1] is a "unit" ? args[i += 1] : 0

absolute()
  pos("absolute", arguments)
fixed()
  pos("fixed", arguments)

#prompt
  absolute top 150px left 5px
  width 200px
  margin-left -(@width / 2)
#logo
  fixed top left

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

可以看到上面的代碼中使用了Mixin（混合）還有三目運(yùn)算符等手段構(gòu)建了一個(gè)針對(duì)position的方法，用來(lái)快速生成一個(gè)定位代碼片段。有底向上來(lái)看這段代碼，#prompt和#logo是2個(gè)ID選擇器，在其中調(diào)用了一些Mixin，其實(shí)Mixin與Function的區(qū)別在于，Mixin的內(nèi)容是一段CSS代碼，而Function應(yīng)該是一個(gè)值并自動(dòng)返回，所以調(diào)用它們的時(shí)候，前者將會(huì)替換為一段CSS，而后者將返回一個(gè)Boolean或者像素或者顏色之類的東西，也許用于判斷也許直接放入CSS。然后其中的absolute和fixed分別調(diào)用了pos這個(gè)Mixin。

前綴

而且在調(diào)用時(shí)，也不一定要使用括號(hào)的形式，可以使用CSS的形式，直接Mixin名加空格然后寫參數(shù)。所以有時(shí)候可以直接寫一個(gè)Mixin來(lái)修改CSS屬性的功能，比如看看下面這個(gè)兼容所有標(biāo)準(zhǔn)瀏覽器陰影的寫法，可以很方便的為標(biāo)準(zhǔn)調(diào)用加上各標(biāo)準(zhǔn)瀏覽器的前綴：

box-shadow()
  -webkit-box-shadow arguments
  -moz-box-shadow arguments
  -ms-box-shadow arguments
  -o-box-shadow arguments
  box-shadow arguments
box-shadow 2px 1px 10px red

// =>
-webkit-box-shadow: 2px 1px 10px #f00;
-moz-box-shadow: 2px 1px 10px #f00;
-ms-box-shadow: 2px 1px 10px #f00;
-o-box-shadow: 2px 1px 10px #f00;
box-shadow: 2px 1px 10px #f00;

可以看到調(diào)用時(shí)的寫法與一般的寫法一樣，但是因?yàn)镸ixin的存在，box-shadow不再是一個(gè)屬性，可以變成5行帶有各瀏覽器前綴的CSS。不僅僅是box-shadow，CSS3的許多屬性都需要添加前綴，那是不是可以更近一步呢，來(lái)寫一個(gè)前綴Mixin吧：

// add prefix for attribute
prefix(p_attr, argu...)
  $pfs = webkit moz ms o
  for $pf in $pfs
    -{$pf}-{p_attr} argu
  {p_attr} argu
// box shadow mixin
box-shadow()
  prefix(box-shadow, arguments)
// run
box-shadow 2px 1px 10px red

顏色

如同其他CSS預(yù)處理工具一樣，Stylus在顏色方面也擁有許多內(nèi)置函數(shù)，無(wú)論是判斷，提取還是修改都十分強(qiáng)大。函數(shù) red , blue , green , alpha 將分別返回顏色對(duì)應(yīng)的rgba值，dark 和 light 用于判斷顏色屬于亮色還是暗色，hue , saturation , lightness 則分別返回顏色的色相、飽和度以及亮度，其中色相是在色環(huán)上的角度，單位是deg。我經(jīng)常用的是lighten 和 darken 這兩個(gè)函數(shù)，其作用是增加或減少一個(gè)顏色的亮度，另外還有飽和度的操作函數(shù) desaturate 和 satucate。

似乎沒(méi)有用于修改色相的函數(shù)，不過(guò)這個(gè)需求很容易通過(guò)其他辦法搞定。首先使用hue等函數(shù)將原始色的色相、飽和度、亮度以及透明度取出，然后對(duì)色相的角度進(jìn)行修改，比如加90deg，最后再使用hsla函數(shù)，把去除的對(duì)應(yīng)值當(dāng)作參數(shù)傳入即可。下面用一組三態(tài)按鈕來(lái)舉個(gè)栗子：

See the Pen Single Button by Zhang zhengzheng (@tychio) on CodePen

可以看到Stylus中的第一行代碼 $clr = #99ff22 只要修改這個(gè)顏色值就可以改變按鈕的整體風(fēng)格，并無(wú)需考慮hover和active狀態(tài)時(shí)對(duì)應(yīng)的顏色。比如邊框使用 darken 來(lái)加深，陰影泛光可以使用 lighten 來(lái)加亮，在觸碰時(shí)整體使用了 saturate 來(lái)改變飽和度，按下的Active狀態(tài)我使用了 invert 函數(shù)，可以翻轉(zhuǎn)顏色，在視覺(jué)設(shè)計(jì)中這個(gè)顏色叫做對(duì)位色，即色相處于色環(huán)的對(duì)面的兩種顏色，比如綠對(duì)紅，黃對(duì)藍(lán)，例子中使用了黃綠，所以對(duì)位色就是紫色。當(dāng)然也可以使用上面提到的復(fù)雜一些的方法來(lái)修改色相，達(dá)到使用間隔色之類的效果。

響應(yīng)式

對(duì)于響應(yīng)式的支持，Stylus的media也可以省略花括號(hào)，但和Sass有一些區(qū)別。Stylus在@media的括號(hào)中會(huì)原樣輸出，也就是說(shuō)，我們不能使用變量或混合還有計(jì)算等手段來(lái)直接寫media query。比如一般情況下需要寫一個(gè)min-width，如果這樣寫

$mobiWidth = 768px
@media screen and (min-width $mobiWidth - 1px)
  body
    margin 0

產(chǎn)生的CSS代碼則仍然是

@media screen and (min-width $mobiWidth - 1px) {
  body {
    margin: 0;
  }
}

這不是一個(gè)bug，盡管在Github上有無(wú)數(shù)的人提出issue或者在其后+1，作者仍然不為所動(dòng)，原因不明，不過(guò)幸運(yùn)地是有很多人都提出解決辦法，下面是一個(gè)比較好的方法：

media()
  join(" and ", arguments)
$mobiWidth = 768px
$media = media("screen", "(min-width: " + ($mobiWidth - 1px) + ")")
@media $media
  body
    margin 0

/// =>

@media screen and (min-width: 767px) {
  body {
    margin: 0;
  }
}

這樣就可以使用變量來(lái)作為media的參數(shù)了，只是寫起來(lái)會(huì)比sass麻煩一些，但我覺(jué)得這樣也許更自由，你可以改進(jìn)這個(gè)方法，比如傳一個(gè)object來(lái)作為query條件，而不是拼接一個(gè)字符串。另外這個(gè)方法還用到了 join 內(nèi)置函數(shù)，和Javascript中的Array方法join一樣，很容易使用，除了它還有 push , unshift 函數(shù)。

關(guān)于數(shù)組的定義，對(duì)于響應(yīng)式來(lái)說(shuō)有非常好的幫助，因?yàn)轫憫?yīng)式往往是一系列的尺寸或設(shè)備，無(wú)論如何，使用數(shù)組可以輕松的定義多組對(duì)應(yīng)與索引的配套值。比如我的blog，對(duì)于不同寬度的設(shè)備中有不同的內(nèi)容寬度以及邊距，來(lái)看看簡(jiǎn)化的代碼：

$screen = 1920px 1280px 1024px 768px 640px 320px
$width = 1600px 1080px 840px 600px 480px 300px
$margin = 180px 100px 80px 40px 20px 0
media()
  join(" and ", arguments)
responsive(p_index)
  body
    width $width[p_index]
    margin-left $margin[p_index]
responsive(0)
for $i in 0 1 2 3 4 5
  $media = media("screen", "(max-width: " + $screen[$i] + ")")
  @media $media
      responsive($i)

// =>
body {
  width: 1600px;
  margin-left: 180px;
}
@media screen and (max-width: 1920px) {
  body {
    width: 1600px;
    margin-left: 180px;
  }
}
// ...
@media screen and (max-width: 320px) {
  body {
    width: 300px;
    margin-left: 0;
  }
}

當(dāng)然響應(yīng)式不是簡(jiǎn)單的改變尺寸，如果你需要控制某些內(nèi)容的顯示則可以使用一個(gè)Boolean的數(shù)組來(lái)判斷是否顯示，控制結(jié)構(gòu)或樣式則可以字符串的數(shù)組來(lái)放置一些預(yù)先寫好的Mixin名稱。

CSS Sprite

對(duì)于CSS Sprite相信是所有切圖者的主要工作產(chǎn)出，以前我也推薦過(guò)一些在線的制作Sprite的工具，不過(guò)現(xiàn)在有了Stylus，也許我們可能更快的完成這一切。之前公司有需要國(guó)旗icon，所以做了這個(gè)小項(xiàng)目national_flag用來(lái)創(chuàng)建和維護(hù)國(guó)旗icon的CSS Sprite。由于國(guó)家數(shù)目眾多，每個(gè)國(guó)家對(duì)應(yīng)一個(gè)國(guó)家代碼，所以我定義了一個(gè)二維數(shù)組用來(lái)表現(xiàn)圖片中國(guó)旗的位置，然后在數(shù)組中填入代碼，用來(lái)拼接圖標(biāo)的class名稱，然后按照數(shù)組中的序號(hào)和尺寸就可以生成對(duì)應(yīng)的background-position了。主要代碼如下：

iconBuild(id, col, row)
    .country-{id}
        background-position (0px - (row * $size)) (0px - (col * $size))
/*r /c-> 00 01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16*/
$row00 = CN AF AZ BH BD BN KH TL IN ID IR IQ IL JP JO KZ KW
$row01 = KG LA LB MY MV MN MM NP KP OM PK PS PH QA SA SG KR
$row02 = LK SY TJ TH TM AE UZ VN YE DZ AO BJ BW BF BI CM CV
$row03 = CF RO KM CG CI CD DJ EG GQ ER ET GA GH GN GW KE LS
$row04 = LR __ MG MW ML MR MU MA MZ NA NE NG RW ST SN SC SL
$row05 = SO ZA SD __ TZ __ TG TN UG ZM ZW __ __ __ __ __ __
$row06 = JM PR DO KN VC LC TT CR __ SV GT HN NI PA __ DE __
$row07 = MK AT __ __ __ BG CY __ __ DK SK SI ES EE FI FR __
$row08 = GR HU IE IS IT LV LI LT LU MT MD MC ME NO NL PL PT
$row09 = UK CZ __ RU SM __ SE CH TR UA EU __ CA __ MX __ US
$row10 = AR BO BR CL CO EC GY __ __ PE __ UY VE HK LY NZ RS
$row11 = PY AU SR TJ FM AI __ __ __ __ __ __ __ __ __ __ __
$pos = $row00 $row01 $row02 $row03 $row04 $row05 $row06 $row07 $row08 $row09 $row10 $row11
for $rowList, $row in $pos
    for $country, $col in $rowList
        if $country != __
            iconBuild($country, $row, $col)

其中for不同于Javascript，rowList為數(shù)組遍歷出的一個(gè)元素，而$row為索引，可以這樣理解 for [value], [index] in [array] 。所以可以在兩個(gè)嵌套的for中獲取縱橫的位置以及國(guó)家代碼，來(lái)生成CSS。

作為預(yù)處理工具，Stylus自然也需要預(yù)處理器，不過(guò)它不像Sass需要Ruby環(huán)境，Stylus由Javascript實(shí)現(xiàn)，所以有Javascript就可以處理Stylus。

編譯工具

SublimeText2-Stylus2CSS是一款SublimeText2的Stylus插件。另外我使用這個(gè)項(xiàng)目的SublimeText2插件來(lái)高亮styl文件的代碼。

另外今年8月WebStorm7也才剛剛支持 - Stylus Support。

CodePen支持各種CSS預(yù)處理，自然包括Stylus，上面的按鈕例子就是嵌入的CodePen。

Stylus官方在線其實(shí)是一些示例，不過(guò)它是可編輯的，所以你也可以隨便寫些什么，即時(shí)可以看到結(jié)果。不過(guò)好像還在使用低版本的Stylus，比如一些內(nèi)置函數(shù)就不可用。

Grunt插件

不過(guò)說(shuō)到處理文件，Grunt還是我的最愛(ài)，尤其Stylus是由Javascript實(shí)現(xiàn)，在Nodejs中自然是得天獨(dú)厚。npmjs上有許多用來(lái)處理Stylus的插件，下面簡(jiǎn)單介紹一下Grunt的官方Stylus插件grunt-contrib-stylus。先來(lái)看看最簡(jiǎn)單的配置方法：

stylus: {
  compile: {
    files: {
      "path/to/result.css": "path/to/source.styl"
    }
  }
}

如此就可以利用Grunt將source.styl文件中的Stylus代碼編譯為result.css的CSS代碼。當(dāng)然還可以使用數(shù)組來(lái)進(jìn)行多個(gè)Stylus文件的打包編譯。當(dāng)然不僅于此，先來(lái)看看主要的幾個(gè)配置項(xiàng)：

paths 將自動(dòng)使用@import來(lái)引入一些Stylus文件，比如一些Mixin集合，放在一個(gè)Stylus文件中進(jìn)行維護(hù)，寫在paths中后，就可以在每個(gè)Stylus文件中調(diào)用它們。define 可以定義一些全局變量，然后在Stylus中使用，但我不喜歡使用這個(gè)配置，而是更喜歡把全局變量放在一個(gè)多帶帶的Stylus文件中，然后將這個(gè)文件加入paths的數(shù)組中。一句話，把所有不會(huì)直接產(chǎn)出CSS的Stylus代碼分成若干個(gè)Stylus文件，然后全部添加到paths中，這樣在所有Stylus文件中都可以隨時(shí)調(diào)用了，但要注意這些Stylus文件的調(diào)用關(guān)系和使用先后順序。

compress 及 linenos 是兩個(gè)Boolean值，用來(lái)控制是否壓縮處理后的CSS代碼以及是否在CSS代碼中保留注釋。

banner 是一個(gè)字符串，會(huì)被放置在CSS文件的最前面，一般我用來(lái)寫注釋，比如

banner: "/** 
 * <%= pkg.name %> - <%= pkg.description %>
 * version <%= pkg.version %> 
 * author <%= pkg.author %> 
 * date <%= grunt.template.today() %> 
**/
"

firebug 將控制是否使用一個(gè)Firebug的Stylus插件FireStylus for Firebug，可以在Firefox中調(diào)試Stylus。

use 可以引入一些Stylus的其他grunt插件。

配合watch等Grunt插件就可以達(dá)到自動(dòng)化的Stylus開(kāi)發(fā)，寫樣式將會(huì)非常有效率。

Stylus是一個(gè)由Javascript實(shí)現(xiàn)的CSS預(yù)處理工具，文件后綴為styl，其擁有變量、函數(shù)、混合、條件及循環(huán)語(yǔ)句等功能，還有豐富的內(nèi)置函數(shù)用于處理顏色、數(shù)字、數(shù)組等數(shù)據(jù)。在grunt的輔助下，Stylus將帶來(lái)極大的開(kāi)發(fā)效率。

原文地址： http://www.tychio.net/tech/2013/11/16/stylus-guide.html