學習CSS預處理器:Sass和less進行對比

2024-07-11 08:48:21

字體：大中小

來源：轉載

供稿：網(wǎng)友

什么是CSS預處理器？
Css可以讓你做很多事情，但它畢竟是給瀏覽器認的東西，對開發(fā)者來說，Css缺乏很多特性，例如變量、常量以及一些編程語法，代碼難易組織和維護。這時Css預處理器就應運而生了。Css預處理器定義了一種新的語言將Css作為目標生成文件，然后開發(fā)者就只要使用這種語言進行編碼工作了。預處理器通常可以實現(xiàn)瀏覽器兼容，變量，結構體等功能，代碼更加簡潔易于維護。 “我應該選擇哪種css預處理器？”是最近網(wǎng)上的一大熱門話題，很多人為此爭論不休。相比過去我們對是否應該使用Css預處理器的話題，這已經(jīng)是很大的進步了。目前比較流行的兩種預處理器是Sass和Less。
至于他們誰更優(yōu)秀一些：簡短的答案是:Sass
稍長一點的答案：Sass比其他任何預處理器語言都好，但如果你正在使用Less，這也很酷！這可以證明你正在使用預處理器來寫幫助自己寫更好的代碼。
非常長的答案：請繼續(xù)往下看
使用之前需要學習的知識 – Ruby，js，命令行等等
使用Css預處理器唯一真正需要學習的只有語法，SASS是Ruby語言寫的，但是兩者的語法沒有關系。不懂Ruby，照樣可以使用。你需要的只是一個像CudeKit的應用來觀察和編譯你所撰寫的文件。 Less就更不用了，只需要調(diào)用一個js即可(在客戶端運行)，或者借助Node.js（服務器運行）。
獲勝者：無。
對css3的幫助
Css3提供了很多新特性，比如漸變、動畫、圓角等等，但是在使用這些高級特性的時候，我們往往需要編寫( -moz-、-webkit-、-ms- …)。不論Sass和Less，你都可以用自己的混合來編寫。但是在項目中當我們需要修改這些繁瑣的前綴時，我們?nèi)绾尾挥梅祷孛恳恍写a并且更新它們？你大概也不會更新手工混合的文件。但是在Sass中，我們可以使用開源的Css框架，會自動更新并自動處理瀏覽器前綴。我們只需要保持更新，外加偶爾按一下編譯鍵，它就會幫助我們自動處理所有的前綴問題，毫不費力。( -moz-、-webkit-、-ms- …)。不論Sass和Less，你都可以用自己的混合來編寫。但是在項目中當我們需要修改這些繁瑣的前綴時，我們?nèi)绾尾挥梅祷孛恳恍写a并且更新它們？你大概也不會更新手工混合的文件。但是在Sass中，我們可以使用開源的Css框架，會自動更新并自動處理瀏覽器前綴。我們只需要保持更新，外加偶爾按一下編譯鍵，它就會幫助我們自動處理所有的前綴問題，毫不費力。
獲勝者：Sass。
邏輯/循環(huán)
Less可以做防御型混合，這種混合只在條件為真的情況下生效。比如你想根據(jù)文本顏色來設置背景色，當文本色比較淺的時候背景色很深，文本色比較深的時候背景色很淺。那么你就得把混合分成兩部分，以確保有一種情況條件為真，使混合生效。

復制代碼

上一篇：網(wǎng)頁制作中的網(wǎng)頁字體空格間距問題的技巧

下一篇：利用CSS3參考手冊和CSS3代碼生成工具加速來學習網(wǎng)頁制