CSS preprocessor 介紹，與 SASS 入門分享
- 1. CSS Preprocessor 介紹 與 SASS 入門分享 Wan-Ting Jheng 2015/2/10
- 3. CSS (Cascading Style Sheets) 用來控制網頁外觀 例如 元素位置、外型、顏色、特效 等等 不算是一種可程式化語言，只是許多屬性設定的集合 HTML CSS
- 5. 於是 CSS Preprocessor 應運而生 定義一種新的程式語言 透過這個語言進行網頁樣式設計 然後再轉換生成CSS檔 為撰寫樣式的過程，加上程式語言特性 讓程式變簡潔 可讀性更好 更易維護
- 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