58.Less介紹及其與Sass的差異
Less英文官網需要開啟VPN才能正常訪問，如果你無法開啟Less官網，建議您移步到Alexis Sellier領導的團隊所譯的中文官網Less中文。
——大漠
事實證明，Less——以及Sass對於這個功能，遠不止這些。LESS和Sass在語法上有些共性，比如下面的這些：
- 混合（Mixins）：class中的class;
- 引數混合（Parametric）：可以像函式一樣傳遞引數的class;
- 巢狀規則（Nested Rules）：class中巢狀class，從而減少重複的程式碼；
- 運算（Operations）：css中的數學計算；
- 顏色功能（Color function）：可以編輯你的顏色；
- 名稱空間（Namespaces）：樣式分組，從而方便被呼叫；
- 作用域（Scope）：區域性修改樣式；
- JavaScript表示式(Javascript evaluation)：在CSS樣式中使用Javascript表示式賦值。
上面八條在LESS和Sass中是一個很重要的概念，只有把上面的概念理解清楚了，才能更好的學習LESS和Sass，在這裡我借花獻佛，從各處摘抄了一下，對這幾個概念的簡單的介紹：
1、Mixins，此處我譯成了混合，也有很多同行朋友將其譯成混入，不管是混合也好，還是混入也罷。其主要意思是將一個定義好的class A引入到另一個class B中，從而簡單實現class B繼承了class A的所有屬性。
2、Parametric，帶引數混合，像函式一樣在class A中定義一個引數的預設值、或者引數屬性集合，還可以是@arguments蠻量，然後將定義好的class A引入class B中
3、Nested Rules譯成巢狀規則，指的是在一個選擇器中巢狀另一個選擇器來實現繼承。從而減少了程式碼量，並且增加了程式碼的可讀性。
4、Operations運算，在CSS中使用加、減、乘、除進行數學運算，主要運用於屬性值和顏色的運算，可以輕鬆實現屬性值之間的複雜關係。
5、Color function顏色功能，顏色的函式運算，顏色會先被轉化成HSL色彩空間，然後在通道級別操作。
6、Namespaces
名稱空間，將一些變數或者混合模組打包封裝，更好的組織CSS和屬性集的重複使用；7、Scope作用域，先從本地查詢變數或者混合模組，如果沒有找到的話就會去父級作用域中查詢，直到找到為止，這一點和其他程式語言的作域非常的相似；
8、Javascript evaluation，javascript的表示式,在Less或sass檔案中可以使用js的表示式,用來賦值。
——大漠
LESS和Sass之間的主要區別是他們的實現方式不同，LESS是基於JavaScript執行,所以LESS是在客戶端處理。
另一方面，Sass是基於Ruby的，是在伺服器端處理的。很多開發者不選擇LESS是因為LESS輸出修改過的CSS到瀏覽器需要依賴於Javascript引擎，而Javascript引擎需要額外的時間來處理程式碼。關於這個有很多種方式，我選擇的是隻在開發環節使用LESS。一旦開發完成，我就複製貼上LESS輸出的到一個壓縮器，然後到一個單獨的CSS檔案來替代LESS檔案。另一種方式是使用LESS APP來編譯和壓縮你的LESS檔案。兩種方式都將是最小化你的樣式輸出，從而避免由於使用者的瀏覽器不支援Javascript而可能引起的任何問題。儘管這不大可能，但終歸是有可能的。
LESS轉譯工具除了LESS APP之外，現在目前流行的主要有：SimpLess、WinLess、CodeKit.app、LESS編譯輔助指令碼-LESS2CSS。
——大漠
更新：在Twitter的評論上，LESS和Sass對比討論也是相當的熱烈。也請考慮Adam Stacoviak回覆。現實情況，Sass確實需要在Ruby上執行,然而他不需要在伺服器上編譯CSS。它也可以在本地編譯（正如前面提到的LESS）,編譯後的CSS可以運用到你的專案上，Wordpress主題中.引擎模板，或者任何伺服器就像你的CSS檔案。正如Smashiing Magazine讀者和其他讀者存在很大的差異，我猜想有很大一部分讀者正在使用Mac閱讀這評論一樣。Mac也預設提供了對Sass的安裝和支援，只需要一行命令就可以（sudo gem install sass）。
如果你安裝了Sass，你在本地就可以將Sass轉譯成CSS，並將轉譯的程式碼用到你的專案中。如果你還不知道如何安裝Sass(或者Compass)，我們也寫了一份詳細的指南Getting Started with Sass and Compass，可以很好的幫你清除這個障礙。
LESS Is More
安裝
在你的專案中引入LESS很簡單：
- 去下載一個你要的less.js指令碼；
- 建立一個檔案來放置你的樣式，比如說style.less
- 新增下面的程式碼到你的HTML的<head>中。
<link rel="stylesheet/less" type="text/css" href="styles.less"> <script src="less.js" type="text/javascript"></script>
請注意“link”的“rel”屬性。你需要在屬性值後面使用“/less”，LESS才起作用。你也需要在“link”樣式表後面引入"script"。如果你正在使用“HTML5”語法，我無法想像為什麼你不會用呢？你可以少去“type=‘text/css’”和“type='text/javascript'”。
安裝LESS有兩個細節需要特別強調，往往很多人就是這裡出錯：
- 呼叫less樣式表時，link標籤的rel屬性一定是“stylesheet/less”，其中“/less”不可缺少；
- less.js指令碼只能放在載入less樣式的link後面，才能生效。
——大漠
LESS還有一個伺服器端的版本。可以通過Node Package Manager簡單的在伺服器上安裝LESS。
變數
如果你是一個開發人員，變數應該是你最好朋友之一。如果你要重複使用一個資訊（比如例中的顏色color），將它設定為一個變數就可以。使用這種方式，你就可以保證自己的一致性並可能減少滾動程式碼來查詢顏色值、複製和貼上等繁瑣的工作了。你甚至可以使用加或者減顏色值，從而得到你需要的顏色值，例如：
@blue: #00c;/*定義藍色變數*/
@light_blue: @blue + #333;/*定義淺藍色變數*/ @dark_blue: @blue - #333;/*定義深藍變數*/
如果我們將這些樣式應用到3個div上面，我們就可以看到加上和減掉十六進度的顏色值和原始的藍色形成的漸變效果：
從@light_blue到@blue到@dark_blue的漸變效果
這段LESS程式碼應該是這樣使用的：
.light_blue { background-color: @light_blue; } .blue { background-color: @blue; } .dark_blue { background-color: @dark_blue; }——大漠
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”得到同樣的效果，而且你僅僅在樣式表中就完成了。並且它工作的很好：
兩個文章列表和無序列表都共享同一個邊框樣式。
在Sass中，你要在樣式規則前面新增@minix宣告，規則它是個巢狀。然後，通過@include來呼叫它：
@mixin border {
border-top: 1px dotted #333;
}
article.post {
background: #eee; @include border; } ul.menu { background: #ccc; @include border; }
帶引數混合（Parametric mixins）
在CSS中也有像函式的功能,這些對於那些CSS中看似多餘程式碼非常有用。最好和最有用的例子就是CSS2到CSS3中各瀏覽器的私有屬性字首。Nettuts+有一篇Jeffre Way寫的很讚的視訊和文章，內容中包含了有用的引數組成的檔案，他們涵蓋了大部分使用各個瀏覽器私有字首的CSS3屬性。例如，在他們的格式中，一個簡單的處理圓角的mixin是這樣的：
.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; }
巢狀規則(Nested rules)
在CSS中嵌class和id是避免樣式干擾或者被別的樣式干擾的唯一方式。但是可能變得很亂。使用一個選擇器，類似於"#site-body .post .post-header h2"是毫無用處，而且還佔用大量沒必要的空間。使用LESS,你可以巢狀ID、class以及元素標籤。對於前面提到的例子，你可以這樣寫：
#site-body { …
.post { …
.post-header { …
h2 { … }
a { …
&:visited { … }
&:hover { … }
}
}
}
}
上面的程式碼最終效果和上面的一大串選擇器效果一樣，但是要更容易閱讀和理解的多，而且它佔用很少的空間。你也可以通過&來引用元素樣式到他們的偽元素上，這個功能類似於javascript中的this。
運算（Operations）
你很可能期望在CSS中使用數字或者變數實現數學運算！
@base_margin: 10px;
@double_margin: @base_margin * 2; @full_page: 960px; @half_page: @full_page / 2; @quarter_page: (@full_page / 2) / 2;
宣告一下，在取得“@quarter_age”變數時，我們也可以直接除以4，但是在這裡，我們只是想演示一下圓括號組成的“運算順序”（這個運算順序可能小學生也知道的）。在複合型運算中，小括號也是很有必要的，例如：“ border: (@width / 2) solid #000”。
Sass在數字上要比LESS更專業,他已經可以直接換算單位了。Sass可以處理無法識別的度量單位，並將其輸出。這個特性很明顯是一個對未來的嘗試——證明W3C作出的一些改變。
/* Sass */
2in + 3cm + 2pc = 3.514in /* LESS */ 2in + 3cm + 2pc = Error
Color函式
前面，我提到了LESS如何幫我們用編碼來實現一個調色盤。在這裡功能最大的一部分就是顏色函式。假設您在樣式中使用一個標準的藍色風格,然後，你想要使用這個顏色在一個表單中製作一個漸變的“提交”。你可以開啟Photoshop或者另一個編輯器來得到一個比藍色稍亮或變暗的十六進位制值色作為一個漸變色。或者你可以只使用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%);”。
無論哪種方式,你都會得到一個不錯的效果:
很讚的漸變的、基於變數的”Submit”按鈕。
還有很多顏色函式，比如變暗或者調整顏色的飽和度，甚至你可以旋轉色盤來使用其他顏色。我建議你親自嘗試下你能想出的用法。
Sass似乎有更多的顏色函式選擇——但我們並不需要這麼多。我個人最常用的還是lighten和darken函式功能。如果您想了解更多的東西，你可以詳細的閱讀這裡介紹。
條件語句和控制
這是一個很強大的功能，也是LESS不支援的功能。使用Sass，你可以使用if{}else{}這樣的條件語句，以及for{}迴圈語句，他甚至還支援and、or和not，以及<、>、<=、>=和==等操作符。
/* Sass中簡單的if語句 */
@if lightness($color) > 30% {
background-color: #000; } @else { background-color: #fff; } /* Sass中簡單的for迴圈語句*/ @for $i from 1px to 10px { .border-#{i} { border: $i solid blue; } }
名稱空間（namespaces）
名稱空間可以用於組織我們的CSS，從而提高到另一個層次，我們將一些公用的樣式建立分組，然後在使用的時候直接呼叫。例如，如果我們建立了一個名為“default”的樣式分組，我們就可以在使用到的時候直接從該組中呼叫。/p>
#defaults {
.nav_list () {
list-style: none;
margin: 0; padding: 0;
}
.button () { … }
.quote () { … }
}
然後，在我們的程式碼中，如果我們正好在一個nav元素中使用了ul元素，我們就會想到我們需要default樣式。那麼我們就可以簡單的呼叫它，它也會被直接應用。
nav ul {
#defaults > .nav_list;
}
作用域（scope）
作用域是程式中的一個標準，LESS中也是。如果你在你樣式表的root級宣告一個變數，它在整個文件中都是可以呼叫的。然而，如果你在一個選擇器，比如id或者class中，重新定義了這個變數，那麼，它就只能在這個選擇器中可用了——當然是重新定義後的新值。
@color: #00c; /* 藍色 */
#header {
@color: #c00; /* 紅色 */ 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 = 'http://coding.smashingmagazine.com';
background-image: url("@{base_url}/images/background.png");
轉義(Escaping)
有時候,你需要引入一個值,它是無效的CSS語法或者LESS不能識別。通常是一些IE的Hack。要避免丟擲異常並破壞LESS，你將需要避開它們。
.class {
filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=20)"; } /* 實際上會輸出下面的程式碼: */ .class { filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20); }
javascript的表示式
這是LESS中我最中意的部分：在樣式表中使用Javascript——相當精彩。你可以使用表示式，也可以參考環境方向來使用反單引號。
@string: `'howdy'.toUpperCase()`; /* @string becomes 'HOWDY' */
/* You can also use the previously mentioned interpolation: */
@string: 'howdy'; @var: ~`'@{string}'.topUpperCase()`; /* becomes 'HOWDY' */ /* Here we access part of the document */ @height = `document.body.clientHeight`;
輸出格式
然而LESS並沒有輸出設定，而Sass提供4中輸出選項：nested, compact, compressed 和 expanded。
總結
這兩者有很多共同點。對於寫程式碼的設計師來說，他們都是很棒的工具，並且他們還可以幫助開發者更有效、更快速的工作。如果你是Ruby或HAML的愛好者，那麼Sass會是你的好助手。對我來說，一個PHP和Javascript極客，我更傾向於LESS，因為它便於引入和能夠使用JavaScript表示式以及文件屬性。我懷疑我甚至接近真正理解在樣式表中程式設計的可能行了，但是我仍堅持嘗試。如果你在工作中有用到它們中的一個，或者兩個都用，我很樂意聽到關於它的更多內容，並看到你的成果。當然，技巧、訣竅、更正一直是很歡迎的。
譯者手語：整個翻譯依照原文線路進行，並在翻譯過程略加了個人對技術的理解。如果翻譯有不對之處，還煩請同行朋友指點。謝謝！
如需轉載煩請註明出處：
英文原文：http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/
中文譯文：http://www.w3cplus.com/css/an-introduction-to-less-and-comparison-to-sass.html
著作權歸作者所有。
商業轉載請聯絡作者獲得授權,非商業轉載請註明出處。
原文: https://www.w3cplus.com/css/an-introduction-to-less-and-comparison-to-sass.html © w3cplus.com