作者 Werner Schuster 譯者 楊晨 發(fā)布于 2009年7月28日 上午5時(shí)56分

在Web開發(fā)中，CSS的使用是非常普遍的，但濫用的情況也是屢見不鮮。 LESS 和 Sass 都是用Ruby實(shí)現(xiàn)的工具，可以幫助開發(fā)者寫出復(fù)用性更優(yōu)的CSS文件。它們的方法基本類似： 將類似CSS但是更為強(qiáng)大的輸入語(yǔ)言，最終轉(zhuǎn)換為CSS代碼。

兩種語(yǔ)言給CSS添加的特性都是相似的，具體參見 LESS 和 Sass 的文檔。下面是一個(gè)簡(jiǎn)略的概述：

• 變量 ： LESS中的 @name 和Sass中的 !name 都是變量。我們可以給變量賦值，然后在文件中使用它們。
• 內(nèi)嵌 ：這個(gè)功能將另外一個(gè)急需的特性加入CSS：將選擇器嵌入到其他等級(jí)，而不是不得不取消在一些高級(jí)選擇器定義中嵌套。LESS和Sass翻譯器將這個(gè)簡(jiǎn)潔的特性擴(kuò)展到了CSS。
• 混合類型 ：允許開發(fā)者抽象出性質(zhì)的共同點(diǎn)，然后命名并且加入到選擇器中。熟悉Ruby混合類型的開發(fā)者會(huì)了解混合類型在CSS中的應(yīng)用。Sass也允許將混合類型作為參數(shù)，使得混合類型的應(yīng)用更加靈活。
• 操作 ：LESS和Sass都支持簡(jiǎn)單的算術(shù)操作，例如加法。將這個(gè)特性和變量結(jié)合起來(lái)，會(huì)使得CSS變得更加靈活。這兩個(gè)工具需要保證操作的正確性（例如字體大小）。

Sass 是由 Haml 的團(tuán)隊(duì)開發(fā)的。它采用了Haml的思想，使用縮進(jìn)而不是括號(hào)這樣的分隔符來(lái)定義代碼塊或者內(nèi)嵌級(jí)別。

Sass的解析器 和翻譯器將Sass語(yǔ)言翻譯成CSS，并且用變量值替換文件中變量的引用以及混合類型等等。

LESS 是受Sass啟發(fā)而開發(fā)的工具，它列出了 如下開發(fā)的理由 ：

為什么要開發(fā)一個(gè)Sass的替代品呢？原因很簡(jiǎn)單：首先是語(yǔ)法。Sass的一個(gè)關(guān)鍵特性是縮進(jìn)式的語(yǔ)法，這種語(yǔ)法可以產(chǎn)生柱式外觀的代碼。但是你需要花費(fèi)時(shí)間學(xué)習(xí)一門新的語(yǔ)法以及重新構(gòu)建你現(xiàn)在的樣式表。

LESS給CSS帶來(lái)了很多特性，使得LESS能夠和CSS無(wú)縫地緊密結(jié)合在一起。因此，你可以平滑地由CSS遷移到LESS，如果你只是對(duì)使用變量或者操作感興趣的話，你不需要學(xué)習(xí)一整門全新的語(yǔ)言。

LESS的解析器是使用 TreeTop 編寫的，TreeTop是一個(gè)Ruby編寫的PEG解析器的生成器（ LESS TreeTop語(yǔ)法 ）。

LESS和Sass工具（編譯器和API）能夠作為Gems安裝，使用命令行工具進(jìn)行編譯，但是也可以在Ruby代碼中使用。

Sass看起來(lái)在提供的特性上占有優(yōu)勢(shì)，但是LESS能夠讓開發(fā)者平滑地從現(xiàn)存CSS文件過(guò)渡到LESS，而不需要像Sass那樣需要將CSS文件轉(zhuǎn)換成Sass格式。Sass的維護(hù)者Nathan Weizenbaum在一篇 對(duì)比LESS和Sass的博文 中提到，未來(lái)Sass將會(huì)提供括號(hào)，而不是像CSS或者LESS那樣的縮進(jìn)。

查看英文原文： DRYer CSS with LESS or Sass

使用LESS或Sass重構(gòu)CSS代碼