Weitere ähnliche Inhalte
Ähnlich wie CSS preprocessor 介紹,與 SASS 入門分享 (20)
CSS preprocessor 介紹,與 SASS 入門分享
- 5. 於是 CSS Preprocessor 應運而生
定義一種新的程式語言
透過這個語言進行網頁樣式設計
然後再轉換生成CSS檔
為撰寫樣式的過程,加上程式語言特性
讓程式變簡潔
可讀性更好
更易維護
- 7. SASS LESS Stylus
出現時間 2007年誕生
發展最早
2009年 2010年
相對年輕
執行環境 Ruby ● client 端執行
引入一隻.js
● server 端執行
安裝Node.js
Node.js
語法 較成熟 CSS的擴展
程式特性較差
沒有高級功能
如 loop (可透過條件式與
遞迴組合達到)
較自由、不嚴謹
- 9. 在說明 SASS 基本語法之前
先來看個範例 - 我的 SASS 作業
github page http://wantingj.github.io/sass_calender/
github repo. https://github.com/wantingj/sass_calender
- 12. & - 參考父選擇符
% - 佔位選擇符
合併樣式 Extend
多個選擇器要使用同樣樣式
可透過 extend 合併
SASS CSS
- 14. 比較 Extend 與 Mixin
Extend
單純合併樣式
好處是產生的 CSS 內容較短
運用時機:
許多選擇器具有相同樣式時
Mixin
由於可以傳參數、content
可以做到許多複雜功能
運用時機:
自製好用小工具集
透過 mixin 收集為一隻檔案