LESS介紹及其與Sass的差異

 

 

自從一個月前我偶然發現LESS之后我就開始堅定的使用它了。CSS本身對我來說從來不是問題，但是我很好奇使用變量來沿著一個調色盤為我的網站或模板創建一些東西的想法。擁有一個提供固定數量選項可選的色盤可以讓我避免顏色太跳躍以至于從一個已定的風格中脫離。事實證明，LESS——以及Sass——功能比這個要多太多。LESS和Sass在語法上有些共性，比如下面這些：

• 混入(Mixins)——class中的class；
• 參數混入——可以傳遞參數的class，就像函數一樣；
• 嵌套規則——Class中嵌套class，從而減少重復的代碼；
• 運算——CSS中用上數學；
• 顏色功能——可以編輯顏色；
• 名字空間(namespace)——分組樣式，從而可以被調用；
• 作用域——局部修改樣式；
• JavaScript 賦值——在CSS中使用JavaScript表達式賦值。

LESS和Sass的主要不同就是他們的實現方式，LESSS是基于JavaScript，所以，是在客戶端處理的。

另一方面，Sass是基于Ruby的，然后是在服務器端處理的。很多開發者不會選擇LESS因為JavaScript引擎需要額外的時間來處理代碼然后輸出修改過的CSS到瀏覽器。關于這個有很多種方式，我選擇的是只在開發環節使用LESS。一旦我完成了開發，我就復制然后粘貼LESS輸出的到一個壓縮器，然后到一個單獨的CSS文件來替代LESS文件。另一個選擇是使用LESS.app來編譯和壓縮你的LESS文件。兩個選擇都將最小化你的樣式輸出，從而避免由于用戶的瀏覽器不支持JavaScript而可能引起的任何問題。盡管這不大可能，但終歸是有可能的。

LESS Is More

介紹

在你的項目中引入LESS很簡單：

1.下載less.js;

2.創建一個文件來放你的樣式，比如style.less;

3.添加以下代碼到你的HTML的中:

請注意link的rel屬性。你需要在屬性值的最后面使用/less以使LESS起作用。然后在link后面引入scirpt也是必須的。如果你在用HTML5語法——為什么不用呢？——你可以省去type=”text/css”和type=”text/javascript”

 

---