分析目前常見的三款 CSS preprocessor - LESS, SASS, Stylus，介紹他們的優缺點及如何去挑選適合專案的選擇。並介紹 SASS 的基本語法及新手入門心得。

1. CSS Preprocessor 介紹
與 SASS 入門分享
Wan-Ting Jheng
2015/2/10

2. 後端工程師，主要是php/MySQL
這年頭只要和網路設計師有關聯
就算應徵的是後端工程師
也會有前端的工作掉到頭上
因此我也稍微會一點點 CSS
自介

3. CSS (Cascading Style Sheets)
用來控制網頁外觀
例如 元素位置、外型、顏色、特效 等等
不算是一種可程式化語言，只是許多屬性設定的集合
HTML CSS

4. 如果寫CSS，也能像一般的
程式語言一樣，具有變數、數
學運算、條件式、迴圈、函式
庫等等，該有多好?
CSS 缺點: 結構很難有組織、不易維護

5. 於是 CSS Preprocessor 應運而生
定義一種新的程式語言
透過這個語言進行網頁樣式設計
然後再轉換生成CSS檔
為撰寫樣式的過程，加上程式語言特性
讓程式變簡潔
可讀性更好
更易維護

6. 目前常見的三款 CSS preprocessor
http://sass-lang.com/
http://lesscss.org/
http://lesscss.org/

7. SASS LESS Stylus
出現時間 2007年誕生
發展最早
2009年 2010年
相對年輕
執行環境 Ruby ● client 端執行
引入一隻.js
● server 端執行
安裝Node.js
Node.js
語法 較成熟 CSS的擴展
程式特性較差
沒有高級功能
如 loop (可透過條件式與
遞迴組合達到)
較自由、不嚴謹

8. 有程式底子的工程師
需要較複雜CSS效果
已經是 Ruby，或不排斥安裝 Ruby 的使用者
沒有程式經驗的設計師
只是想稍微玩一下的輕量級使用者
有程式底子的工程師
需要較複雜CSS效果
已經是 Node.js，或不排斥安裝 Node.js 的使用者
選
適合
選

9. 在說明 SASS 基本語法之前
先來看個範例 - 我的 SASS 作業
github page http://wantingj.github.io/sass_calender/
github repo. https://github.com/wantingj/sass_calender

10. 變數 Variables
以 $ 開頭後面跟著變數名稱
用 : 分隔變數名 與變數值
數學運算
加減乘除樣樣 OK
方便計算寬度，間距等

11. 巢狀 Nesting
html 的巢狀結構，透過 SASS 的巢狀語法
可省下過去寫 CSS 時，必須重覆寫父節點名稱的動作
並且讓程式更有結構性
SASS CSS

12. & - 參考父選擇符
% - 佔位選擇符
合併樣式 Extend
多個選擇器要使用同樣樣式
可透過 extend 合併
SASS CSS

13. Mixin
概念有點像函式、巨集
當有一段 CSS 設定經常重複使用
可以將該段程式獨立成一個 mixin 方便取用
例如 瀏覽器兼容性設定
可以傳入參數，並預設參數值
可以傳入 @content
content 可為整段 CSS (選擇器,屬性,設定值)

14. 比較 Extend 與 Mixin
Extend
單純合併樣式
好處是產生的 CSS 內容較短
運用時機:
許多選擇器具有相同樣式時
Mixin
由於可以傳參數、content
可以做到許多複雜功能
運用時機:
自製好用小工具集
透過 mixin 收集為一隻檔案

15. Import
將程式碼分割成多個檔案
避免過去 css 動不動就上千行導致維護困難
對於程式結構組織化很有幫助
修改程式時，有助於聚焦在特定功能上
檔案名以下底線 _ 為前綴的 sass 檔不會產生 css 檔
ref. http://ithelp.ithome.com.tw/question/10132821

16. 顏色函數
SASS 提供許多顏色相關功能
如: 調整 明暗 / 飽合度 / 色相 / 透明度 等
可滿足多數需求
ref. http://sassme.arc90.com/

17. compass
http://compass-style.org/
SASS的擴充
提供豐富的函式庫
特效，如圓角、漸層、image sprite等
輕鬆處理瀏覽器相容性問題
還有...
變數類型: list, key-value pair
if/else, loop (for,each,while)

18. 結論
工欲善其事，必先利其器
透過 CSS preprocessor 的幫助
可以大大簡化撰寫 CSS 的過程，並且讓程式碼更好維護
有優點當然也會有缺點
需要安裝執行環境，對不熟悉下指令的人來說會有門檻
有此困難的人建議可以從 LESS 入門
從已存在的 CSS 專案導入
願意嘗試就是好的開始~

19. Reference
SASS/LESS/Stylus 表格式詳細比較
http://csspre.com/compare
SASS/LESS/Stylus 安裝環境、語法比較
http://www.cn-sass.com/%E6%95%99%E7%A8%8B/css-preprocessor-sass-vs-less-
stylus.html
Sass教學手冊導讀
http://ithelp.ithome.com.tw/question/10161764
Sass 語法https://github.com/hlb/sass-doc-
zh/blob/master/SASS_REFERENCE_ZH_TW.md