CSS Preprocessor 介紹與 SASS 入門分享

Wan-Ting Jheng2015/2/10

後端工程師，主要是php/MySQL

這年頭只要和網路設計師有關聯

就算應徵的是後端工程師

也會有前端的工作掉到頭上

因此我也稍微會一點點 CSS

自介

CSS (Cascading Style Sheets)用來控制網頁外觀

例如 元素位置、外型、顏色、特效 等等

不算是一種可程式化語言，只是許多屬性設定的集合

HTML CSS

如果寫CSS，也能像一般的

程式語言一樣，具有變數、數

學運算、條件式、迴圈、函式

庫等等，該有多好?

CSS 缺點: 結構很難有組織、不易維護

於是 CSS Preprocessor 應運而生

定義一種新的程式語言

透過這個語言進行網頁樣式設計

然後再轉換生成CSS檔

為撰寫樣式的過程，加上程式語言特性

讓程式變簡潔

可讀性更好

更易維護

目前常見的三款 CSS preprocessor

http://sass-lang.com/

http://lesscss.org/

http://lesscss.org/

SASS LESS Stylus

出現時間 2007年誕生發展最早

2009年 2010年相對年輕

執行環境 Ruby ● client 端執行

引入一隻.js

● server 端執行

安裝Node.js

Node.js

語法 較成熟 CSS的擴展

程式特性較差

沒有高級功能

如 loop (可透過條件式與

遞迴組合達到)

較自由、不嚴謹

有程式底子的工程師

需要較複雜CSS效果

已經是 Ruby，或不排斥安裝 Ruby 的使用者

沒有程式經驗的設計師

只是想稍微玩一下的輕量級使用者

有程式底子的工程師

需要較複雜CSS效果

已經是 Node.js，或不排斥安裝 Node.js 的使用者

選

適合

選

在說明 SASS 基本語法之前

先來看個範例 - 我的 SASS 作業

github page http://wantingj.github.io/sass_calender/github repo. https://github.com/wantingj/sass_calender

變數 Variables

以 $ 開頭後面跟著變數名稱

用 : 分隔變數名 與變數值

數學運算

加減乘除樣樣 OK方便計算寬度，間距等

巢狀 Nesting

html 的巢狀結構，透過 SASS 的巢狀語法

可省下過去寫 CSS 時，必須重覆寫父節點名稱的動作

並且讓程式更有結構性

SASS CSS

& - 參考父選擇符

% - 佔位選擇符

合併樣式 Extend

多個選擇器要使用同樣樣式

可透過 extend 合併

SASS CSS

Mixin

概念有點像函式、巨集

當有一段 CSS 設定經常重複使用

可以將該段程式獨立成一個 mixin 方便取用

例如 瀏覽器兼容性設定

可以傳入參數，並預設參數值

可以傳入 @contentcontent 可為整段 CSS (選擇器,屬性,設定值)

比較 Extend 與 Mixin

Extend

單純合併樣式

好處是產生的 CSS 內容較短

運用時機:許多選擇器具有相同樣式時

Mixin

由於可以傳參數、content可以做到許多複雜功能

運用時機:自製好用小工具集

透過 mixin 收集為一隻檔案

Import

將程式碼分割成多個檔案

避免過去 css 動不動就上千行導致維護困難

對於程式結構組織化很有幫助

修改程式時，有助於聚焦在特定功能上

檔案名以下底線 _ 為前綴的 sass 檔不會產生 css 檔

ref. http://ithelp.ithome.com.tw/question/10132821

顏色函數

SASS 提供許多顏色相關功能

如: 調整 明暗 / 飽合度 / 色相 / 透明度 等可滿足多數需求

ref. http://sassme.arc90.com/

compasshttp://compass-style.org/

SASS的擴充

提供豐富的函式庫

特效，如圓角、漸層、image sprite等輕鬆處理瀏覽器相容性問題

還有...變數類型: list, key-value pairif/else, loop (for,each,while)

結論

工欲善其事，必先利其器

透過 CSS preprocessor 的幫助

可以大大簡化撰寫 CSS 的過程，並且讓程式碼更好維護

有優點當然也會有缺點

需要安裝執行環境，對不熟悉下指令的人來說會有門檻

有此困難的人建議可以從 LESS 入門

從已存在的 CSS 專案導入

願意嘗試就是好的開始~

ReferenceSASS/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