CSS是前端開發過程中必不可少的一環,但是我們都知道CSS存在許多繁瑣的重復工作,比如顏色的填充、布局的設定等等。為了解決這些問題,出現了許多CSS預編譯方案。直接寫CSS和使用預編譯工具的最大區別就是:預編譯工具允許我們寫更少的代碼,但生成的CSS相比直接寫會非常規范和易讀。下面我們就來了解一下常用的CSS預編譯方案。
/* Less */ @colorPrimary: #F00; .box{ color: @colorPrimary; }
Less 非常易懂,所有的變量都需要以 @ 符號為前綴定義。
/* Sass */ $color-primary: #F00; .box{ color: $color-primary; }
Sass 與 Less 相似,Sass 變量以 $ 符號為前綴定義。Sass 可以寫成兩種形式:SCSS 和 Sass。SCSS 與 CSS 非常相似,而 Sass 的語法更為簡潔
/* Stylus */ color-primary = #F00; .box{ color: color-primary; }
Stylus 與其它預處理器不同,在 Stylus 的語法中無需指定變量類型,直接使用變量名即可。此外,代碼縮進也是 Stylus 的一個特點。
CSS 預編譯語言是時下前端開發中必不可少的工具,在眾多的預編譯方案中,選擇哪一款更多取決于個人的口味和項目的需要。其實每一款工具都有其各自的特點,合理運用相信都會為 CSS 的開發提供很大的幫助。