LESS 與 SASS

作為 CSS 的一種擴展，Less 不僅完全兼容 CSS 語法，而且連新增的特性也是使用 CSS 語法。這樣的設計使得學習 Less 很輕松，而且你可以在任何時候回退到 CSS。

用less來控制樣式，更加的方便，寫好的less代碼，可以通過編譯生成css,這是對css非常強大的擴展，讓我們寫起代碼時，更加的順暢。

變量，在less中聲明變量用@，例如：

@test: red;

.test{

color: @test;

}

編譯后：

.test{

color: red;

}

注:變量只能定義一次，本質就是常量

混合（Mixin），在兩塊樣式中，可以引用另一個塊的樣式，例如：

.cls{

width: 100px;

height: 100px;

}

.cls1{

background: green;

.cls;

}

.cls2{

background: #ccc;

.cls;

}

編譯后：

.cls1{

background: green;

width: 100px;

height: 100px;

}

.cls2{

background: #ccc;

width: 100px;

height: 100px;

}

嵌套規則，選擇器可以嵌套寫，一層一層的，模仿html的DOM結構寫，例如：

.parent{

width: 100px; height: 100px;

background: #000DFF;

.first{

color: #00FF20;

}

.second{

color: red;

}

}

編譯后：

.parent{

width: 100px; height: 100px;

background: #000DFF;

}

.first{

color: #00FF20;

}

.second{

color: red;

}

運算，任何數字、顏色或者變量都可以參與運算，（+-*/）例如：

@border: 1px;

border: @border * 5 solid #000;

函數，Less 內置了多種函數用于轉換顏色、處理字符串、算術運算等。可參考函數手冊。

注釋，塊注釋和行注釋都可以使用：

/* */     //

導入，以導入一個.less文件。

@import "library"; // library.less @import "typo.css"; 

這只是less一些簡單的使用方法，還有很多高級的東西，慢慢看吧，很值得學習，會繼續關注less，并在項目中使用。

學習鏈接：http://less.bootcss.com/

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而可能引起的任何問題。盡管這不大可能，但終歸是有可能的。