Stylus 是一種用來產生 CSS 的程式語言,其語法基本上是從傳統的 CSS 簡化而來,所以跟 CSS 的寫法類似,但是更精簡,另外也加入一些函數與運算的功能,讓使用上更彈性。
Stylus 有以下幾個特點:
- 以 Node.js 為基礎,不需要其餘的軟體。(Sass 需要 Ruby)
- 有提供 JavaScript API,可以讓使用者自定前處理流程。
- 語法精簡,不需要括號、冒號或分號,只使用空白分隔。(如果使用這些符號也是可以正確編譯)
- 有額外的 Nib 函式庫可以使用。
安裝 Stylus
Stylus 是建立在 Node.js 之上的工具,所以首先要先安裝好 Node.js,然後再用 npm 安裝 Stylus:npm install stylus這樣會將 Stylus 安裝在目前的目錄中,如果要安裝在系統的目錄,就要再加上 -g 參數:
npm install stylus -g稍後使用時,請自己注意安裝的路徑,如果安裝的位置是在系統設定好的 PATH 路徑上,那麼直接執行 stylus 就可以使用了:
stylus -h如果安裝在本地的目錄,可能就要加上相對的路徑,例如:
./node_modules/stylus/bin/stylus -h
使用 Stylus
Stylus 的語法就是把原本的 CSS 簡化而成的,例如原本的 CSS 程式碼是這樣:body { font: 12px Helvetica, Arial, sans-serif; } a.button { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }首先把大括號省略,變成這樣:
body font: 12px Helvetica, Arial, sans-serif; a.button -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;接著再省略分號:
body font: 12px Helvetica, Arial, sans-serif a.button -webkit-border-radius: 5px -moz-border-radius: 5px border-radius: 5px最後連同冒號也省略:
body font 12px Helvetica, Arial, sans-serif a.button -webkit-border-radius 5px -moz-border-radius 5px border-radius 5px使用 mixins 讓程式更乾淨:
border-radius() -webkit-border-radius arguments -moz-border-radius arguments border-radius arguments body font 12px Helvetica, Arial, sans-serif a.button border-radius(5px)以上這些都是可以在 Stylus 中使用的語法,也就是說如果你不想省略某些符號(例如保留冒號等),Stylus 也是可以正常編譯的。
在撰寫 Stylus 時唯一要注意的就是空白,Stylus 是靠著縮排來判斷整個程式碼的結構的,這個跟 Python 有點類似。
編譯 Stylus
Stylus 的原始檔都是以 .styl 作為副檔名,假設你已經建立了一個 Stylus 的原始檔 main.styl,則可直接使用 stylus 指令進行編譯:stylus main.styl編譯完會得到一個 main.css 檔,這個檔案就是編譯的結果。
如果想要產生一個最小化 CSS 檔,可以加上 -c 或 --compress 參數:
stylus -c main.styl
若要指定輸出的目錄,可以使用 -o 或 --out 參數:
stylus -o output main.styl這樣就會將輸出的 CSS 檔放置在 output 目錄中。
使用 -U 或 --inline 參數可以將 CSS 中的圖片以 Data URI 的方式,內崁至 CSS 檔中:
stylus -U main.styl
stylus 還有許多參數,可以使用
stylus -h來查看。
Stylus 語法
當然 Stylus 除了讓你少寫一些基本的標點符號之外,它還有很多其他的功能,以下我們以各種範例來介紹。巢狀結構
Stylus 的巢狀結構語法可以讓程式碼更簡潔:body { font: 14px/1.5 Helvetica, arial, sans-serif; #logo { border-radius: 5px; } }編譯結果為:
body { font: 14px/1.5 Helvetica, arial, sans-serif; } body #logo { border-radius: 5px; }
父節點參照(Parent Reference)
跟 SASS 一樣可以參照父節點:ul li a display: block color: blue padding: 5px html.ie & padding: 6px &:hover color: red編譯結果為:
ul li a { display: block; color: #00f; padding: 5px; } html.ie ul li a { padding: 6px; } ul li a:hover { color: #f00; }
Mixins
Stylus 的 mixins 可以讓你定義函數,重複使用程式碼:border-radius(val) -webkit-border-radius: val -moz-border-radius: val border-radius: val button { border-radius(5px); }編譯結果為:
button { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }
Transparent Mixins
Transparent mixins 是 Stylus 特有的功能,它可以讓你傳入任意個數的參數:border-radius() -webkit-border-radius: arguments -moz-border-radius: arguments border-radius: arguments button { border-radius: 5px 10px; }編譯結果為:
button { -webkit-border-radius: 5px 10px; -moz-border-radius: 5px 10px; border-radius: 5px 10px; }
變數
Stylus 的變數跟一般程式語言差不多,你可以自己選擇變數名稱要不要用 $ 字元開頭:#prompt position: absolute top: 150px left: 50% width: w = 200px margin-left: -(w / 2)編譯結果為:
#prompt { position: absolute; top: 150px; left: 50%; width: 200px; margin-left: -100px; }
讀取區域屬性
Stylus 的區域屬性讀取功能,可以讓你取得特定的屬性值:#prompt position: absolute top: 150px left: 50% width: 200px margin-left: -(@width / 2)編譯結果為:
#prompt { position: absolute; top: 150px; left: 50%; width: 200px; margin-left: -100px; }
迴圈
這是 Stylus 的 for 迴圈寫法:table for row in 1 2 3 4 5 tr:nth-child({row}) height: 10px * row編譯結果為:
table tr:nth-child(1) { height: 10px; } table tr:nth-child(2) { height: 20px; } table tr:nth-child(3) { height: 30px; } table tr:nth-child(4) { height: 40px; } table tr:nth-child(5) { height: 50px; }
Interpolation
Stylus 的 interpolation 功能可以讓你將變數安插在 CSS 屬性名稱中,組成各種屬性名稱:vendors = webkit moz o ms official border-radius() for vendor in vendors if vendor == official border-radius: arguments else -{vendor}-border-radius: arguments #content border-radius: 5px編譯結果為:
#content { -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; }
各種運算子
這是 Stylus 支援的各種運算子:body foo: 5px + 10 foo: 2 ** 8 foo: 5px * 2 foo: !!'' foo: foo and bar and baz foo: foo or bar or baz foo: 1..5 foo: 1...5 foo: 'foo' is a 'string' foo: (1 2 3) == (1 2 3) foo: (1 2 3) == (1 2) foo: ((one 1) (two 2)) == ((one 1) (two 2)) foo: ((one 1) (two 2)) == ((one 1) (two)) foo: ((one 1) (two 2))[0] foo: 3 in (1 2 3 4)編譯結果為:
body { foo: 15px; foo: 256; foo: 10px; foo: false; foo: baz; foo: foo; foo: 1 2 3 4 5; foo: 1 2 3 4; foo: true; foo: true; foo: false; foo: true; foo: false; foo: one 1; foo: true; }
變數型別轉換
Stylus 會在適當的時機自動進行變數的型別轉換:body foo: foo + bar foo: 'foo ' + bar foo: 'foo ' + 'bar' foo: 'foo ' + 5px foo: 2s - 500ms foo: 5000ms == 5s foo: 50deg編譯結果為:
body { foo: foobar; foo: 'foo bar'; foo: 'foo bar'; foo: 'foo 5px'; foo: 1.5s; foo: true; foo: 50deg; }
sprintf 運算子
Stylus 的 % 運算子,其作用相當於一般語言的 sprintf 函數:body foo: '%s / %s' % (5px 10px) foo: 'MS:WeirdStuff(opacity=%s)' % 1 foo: unquote('MS:WeirdStuff(opacity=1)')編譯結果為:
body { foo: 5px / 10px; foo: MS:WeirdStuff(opacity=1); foo: MS:WeirdStuff(opacity=1); }
顏色運算
Stylus 也可以直接對顏色進行運算:body foo: white - 50% foo: black + 50% foo: #eee - #f00 foo: #eee - rgba(black,.5) foo: #cc0000 + 30deg編譯結果為:
body { foo: #808080; foo: #808080; foo: #0ee; foo: rgba(238,238,238,0.5); foo: #c60; }
函數
Stylus 可以自行定義函數,函數定義的語法跟 mixins 相同,但在使用上則有差異:sum(nums...) n = 0 n += num for num in nums body foo: sum(1, 2, 3)編譯結果為:
body { foo: 6; }
具名參數
具名參數可以讓程式碼看起來更清楚:fade-out(color, amount = 50%) amount /= 100 color - rgba(0,0,0,amount) body foo: fade-out(#eee) foo: fade-out(#eee, 20%) foo: fade-out(#eee, amount: 50%) foo: fade-out(color: #eee, amount: 50%) foo: fade-out(amount: 50%, #eee) foo: fade-out(amount: 50%, color: #eee)編譯結果為:
body { foo: rgba(238,238,238,0.995); foo: rgba(238,238,238,0.998); foo: rgba(238,238,238,0.995); foo: rgba(238,238,238,0.995); foo: rgba(238,238,238,0.995); foo: rgba(238,238,238,0.995); }
以上是一些常見的使用範例,至於更詳細的語法,請直接參考 Stylus 的官方網站。
參考資料:BootStrap、the change log、blog.fens.me
沒有留言:
張貼留言