● 混入(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和Sass中的唯壹區別就是，LESS用@，Sass用$。同時還有壹些作用域上的差別，我後面會提到。
混入(mixin)
偶爾，我們會創建壹些會在樣式表中重復使用的樣式規則。沒有人會阻止妳在壹個HTML的元素中使用多個class，但是妳可以用LESS，在樣式表中完成。
.border {
border-top: 1px dotted #333;
}
article.post {
background: #eee;
.border;
}
ul.menu {
background: #ccc;
.border;
}
這可以給到妳與妳在兩個元素中分別添加.bordered class同樣的效果——而且僅僅在樣式表中就完成了。而且它工作的很好：
文字和無序列表都被用上了邊框樣式
在Sass中，妳要在樣式規則前面添加@mixin聲明，規定它是個嵌套。然後，通過@include來調用它。
@mixin border {
border-top: 1px dotted #333;
}
article.post {
background: #eee;
@include border;
}
ul.menu {
background: #ccc;
@include border;
}
參數混入
就像在CSS中有函數功能壹樣，這些對於那些在現在的CSS工作中多余的工作非常有用。最好和最有用的例子就是我們正在經歷的從CSS2到CSS3過渡過程中的很多瀏覽器私有前綴。Nettuts+有壹篇Jeffrey Way寫的很贊的視頻和文章，內容是包含著由有用的參數組成的文件，他們涵蓋了大部分使用各個瀏覽器私有前綴的CSS3屬性。
.border-radius( @radius: 3px ) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
在這個例子中，.border-radius有個默認的3px的圓角，但是妳可以使用妳需要的任何值。.border-radius(10px)將會生成半徑為10px的圓角。
Sass中的語法很像LESS，只是使用$聲明變量，然後使用前面提到的@mixin和@include來調用。
選擇器繼承
這個東西LESS並沒有提供。通過這個功能，妳可以將壹個選擇器附加到已經預先定義的選擇器上，而無需再使用逗號將兩者分開的寫法了。
.menu {
border: 1px solid #ddd;
}
.footer {
@extend .menu;
}
/* 上面的寫法規則和下面的效果是壹樣的： */
.menu, .footer {
border: 1px solid #ddd;
}
嵌套規則
在css中嵌套class和ID是避免妳的樣式幹擾或者被別的樣式幹擾的唯壹方法了。但是這可能會很淩亂。使用壹個類似於#site-body .post .post-header h2 的選擇器毫無吸引力而且會占用大量不必要的空格。使用LESS，妳可以嵌套id、class以及標簽。
#site-body { …
.post { …
.post-header { …
h2 { … }
a { …
&:visited { … }
&:hover { … }
}
}
}
}
上面的代碼最終和上面的例子（那壹長串的選擇器）的效果壹樣，但是要更容易閱讀和理解的多，而且它占用很少的空間。妳也可以通過&來引用元素樣式到他們的偽元素上，該功能類似於JavaScript中的this。
運算
這可能是妳所期望的：使用數字或者變量在妳的樣式表中實現數學運算！
@base_margin: 10px;
@double_margin: @base_margin * 2;
@full_page: 960px;
@half_page: @full_page / 2;
@quarter_page: (@full_page / 2) / 2;
聲明下，我也意識到我可以除以4來獲得@quarter_page變量，但是這裏我只是想要演示下圓括號組成“運算順序”在這裏也是可以用的。在使用簡寫的規則中，小括號也是必須的，比如 border: (@width / 2) solid #000。
Sass在數字上比LESS更專業。它已經可以換算單位了。Sass可以處理無法識別的度量單位並將其輸出。這個特性很明顯是壹個對未來的嘗試——證明W3C作出的壹些改變。
/* Sass */
2in + 3cm + 2pc = 3.514in
/* LESS */
2in + 3cm + 2pc = Error
Color函數
在文章開頭，我提到了LESS如何幫我在編碼過程中處理圍繞著壹個調色板。對此貢獻最大的壹部分就是顏色函數。加入妳用壹個標準的藍色貫穿到妳的樣式中，然後妳想要在表單中用這個藍色來做壹個漸變的按鈕。妳可以打開Photoshop或者其它的編輯器來獲取壹個比藍色較淺的或者較暗的HEX色值來作為漸變色。或者，妳可以只是使用LESS中的顏色函數。
@blue: #369;
.submit {
padding: 5px 10px;
border: 1px solid @blue;
background: -moz-linear-gradient(top, lighten(@blue, 10%), @blue 100%); /*Moz*/
background: -webkit-gradient(linear, center top, center bottom, from(lighten(@blue, 10%)), color-stop(100%, @blue)); /*Webkit*/
background: -o-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%);/*Opera*/
background: -ms-linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*IE 10+*/
background: linear-gradient(top, lighten(@blue, 10%) 0%, @blue 100%); /*W3C*/
color: #fff;
text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
}
lighten函數很明顯就是用百分比值來減輕顏色，在這個例子中，它將減輕這個基礎的藍色的10%。這種方法可以讓我們變化的元素或者其它任何元素的顏色值——只是簡單的改變基礎顏色而已。這對於主題(模板)來說非常有用。而且，如果妳使用參數功能，像上面提到的，妳還可以更簡單的應用到壹些瀏覽器私有前綴的聲明中，比如：.linear-gradient(lighten(@blue), @blue, 100%);。
還有很多其它的色彩函數，比如變暗或者調整顏色的飽和度，甚至妳可以旋轉色盤來使用其它顏色。我建議親自嘗試下妳能想出的（用法）。
Sass貌似有更多的選項——但我並不需要這麽多。我個人最常用的還是lighten和darken。如果妳想了解更多，可以看壹下這篇很詳細的介紹。
條件語句與控制
這是壹個的確很贊的東東，也是另壹個LESS不支持的功能。使用 Sass，妳可以使用if { } else { } 條件語句，以及for { }循環。它甚至支持 and、 or和 not，以及 <、 >、 <=、 >= 和 == 等操作符。
/* Sample Sass "if" statement */
@if lightness($color) > 30% {
background-color: #000;
} @else {
}
/* Sample Sass "for" loop */
@for $i from 1px to 10px {
.border-#{i} {
border: $i solid blue;
}
}
名字空間(Namespaces)
名字空間可以用於組織我們的CSS到另壹個檔次，我們可以將壹些公用的樣式分組，然後在用的時候直接使用。例如，如果我們創建了壹個名為default的樣式分組，我們就可以在用到的時候直接從該組中調用。
#defaults {
.nav_list () {
list-style: none;
margin: 0; padding: 0;
}
.button () { … }
.quote () { … }
}
然後，在我們的代碼中，如果我們正好在壹個nav元素中使用了ul元素，我們就會想到我們需要default樣式。那麽我們就可以簡單的調用它，它也會被直接應用。
nav ul {
#defaults > .nav_list;
}
作用域
作用域是編程中的標配，LESS中也是。如果妳在妳樣式表的root級聲明壹個變量，它在整個文檔中都是可以用的。然而，如果妳在壹個選擇器，比如id或者class中，重新定義了這個變量，那麽，它就只能在這個選擇器中可用了——當然是重新定義後的新值。
@color: #00c; /* 藍色 */
#header {
@color: #c00; /* red */
border: 1px solid @color; /* 紅色邊框 */
}
#footer {
border: 1px solid @color; /* 藍色邊框 */
}
因為我們在#header中重新定義了color變量，變量的值將會是不同的而且只會在該選擇器中有效。它之前或者之後的所有地方，如果沒有被重新定義，都會保持那個原始的值。
作用域在Sass中稍有不同。在上面的代碼中，當@color變量變為紅色後，代碼中，此處之後的該變量的值，將會被重寫（成為紅色）。
註釋
這壹部分比較基礎。LESS中允許兩種註釋寫法。標準的CSS註釋，/* comment */，是有效的，而且能夠通過處理並正確輸出。當行註釋，// comment，同樣可以用但是不能夠通過處理也不能被輸出，然後，結果是，“無聲的”。
導入
導入也相當符合標準。標準的 @import: ‘classes.less’; 處理的很好。然而，如果妳想要導入其它的LESS文件，那麽文件的擴展名是可選的，所以 @import ‘classes’; 也是可行的。如果妳想要導入壹些無需LESS處理的內容，妳可以使用 .css 擴展 (比如， @import: ‘reset.css’;)。
字符串插入
字符串也是可以用於變量中的，然後通過@{name}來調用。
@base_url : 'pact, compressed 和 expanded。
結語
這兩個方法有很多***同點。對寫代碼的設計師來說，它們都是很酷的工具，它們也可以幫助開發者更有效和快速的工作。如果妳是Ruby或HTML的粉絲，那麽Sass會是妳的好助手。對我來說，壹個PHP和JavaScript極客，我傾向於LESS，因為它便於引入和能夠使用JavaScript的表達式以及文檔屬性。我懷疑我甚至接近真正理解在樣式表中編程的可能行了，但是我仍堅持嘗試。如果妳在工作中有用到它們中的壹個，或者兩個都用，我很樂意聽到關於它的更多內容，並看到妳的成果。當然，技巧、訣竅、更正壹直是很歡迎的。