CSS 的變種： LESS 與SASS

LESS 是由Alexis Sellier 所設計的工具，原本是用Ruby 實作，用來將LESS 語法轉換成CSS 語言。

後來改用JavaScript 設計後，就能內嵌到瀏覽器中，動態的將LESS 轉為CSS 後 ... 程式人雜誌--2014年9月號(開放公益出版品) CSS的變種：LESS與SASS CSS的變種：LESS與SASS 瀏覽器所認識的語言，不外乎是HTML/CSS/JavaScript這些W3C所規定的官方語言。

因此像LESS與SASS這些語言，當然就屬於「非官方語言」，也就是「變種」。

LESS與SASS都是CSS的變種，語法和CSS有點像，但卻又不太一樣。

這類變種語言通常提供了更強大的功能，更簡潔的語法，而且最後會被轉換成CSS語言之後，才能放到瀏覽器上使用。

變種1:LESS LESS是由AlexisSellier所設計的工具，原本是用Ruby實作，用來將LESS語法轉換成CSS語言。

後來改用JavaScript設計後，就能內嵌到瀏覽器中，動態的將LESS轉為CSS後立刻呈現。

舉例而言、LESS擁有變數的慨念，例如以下範例中的@color就是一個變數。

@color:#4D926F; #header{ color:@color; } h2{ color:@color; } 上述LESS文件被轉換成CSS之後，會變成下列形式。

#header{ color:#4D926F; } h2{ color:#4D926F; } 當然、LESS還支援更強大的語法，例如Mixin就是個經典的功能，以下是一個簡單的範例。

.rounded-corners(@radius:5px){ border-radius:@radius; -webkit-border-radius:@radius; -moz-border-radius:@radius; } #header{ .rounded-corners; } #footer{ .rounded-corners(10px); } 上述文件被轉換成CSS之後會變成下列形式。

#header{ border-radius:5px; -webkit-border-radius:5px; -moz-border-radius:5px; } #footer{ border-radius:10px; -webkit-border-radius:10px; -moz-border-radius:10px; } LESS可以提供層次結構的套嵌語法，以下是一個範例。

#header{ h1{ font-size:26px; font-weight:bold; } p{font-size:12px; a{text-decoration:none; &:hover{border-width:1px} } } } 上述範例被轉換成CSS之後如下所示。

#headerh1{ font-size:26px; font-weight:bold; } #headerp{ font-size:12px; } #headerpa{ text-decoration:none; } #headerpa:hover{ border-width:1px; } 另外、LESS還提供了「運算式與函數呼叫」等功能，請看以下範例。

@the-border:1px; @base-color:#111; @red:#842210; #header{ color:@base-color*3; border-left:@the-border; border-right:@the-border*2; } #footer{ color:@base-color+#003300; border-color:desaturate(@red,10%); } 上述範例轉換成CSS之後，應該會像下面文件這樣。

#header{ color:#333; border-left:1px; border-right:2px; } #footer{ color:#114411; border-color:#7d2717; } 變種2:SASS SASS(SyntacticallyAwesomeStylesheets)是由HamptonCatlin設計，然後由NatalieWeizenbaum實作的一種樣式語言。

如果您瞭解JavaScript與Python的差別，或許就能輕易理解LESS與SASS的差別了。

LESS與JavaScript一樣，有用{...}的大括號框起來，而SASS則像Python一樣，沒有用大括號，而是透過換行與縮排來表現這種層次結構。

事實上，SASS還有一個變種，就是加上大括號的版本，稱為SCSS，這兩種風格可以互相轉換，您可以依照習慣挑選使用。

舉例而言，以下是一個SASS與SCSS的對照範例。

SASS	SCSS
$blue:#3bbfce $margin:16px .content-navigation border-color:$blue color:darken($blue,9%) .border padding:$margin/2 margin:$margin/2 border-color:$blue	$blue:#3bbfce; $margin:16px; .content-navigation{ border-color:$blue; color:darken($blue,20%); } .border{ padding:$margin/2; margin:$margin/2; border-color:$blue; }

SASS與LESS都提供了「變數、mixin、函數」等功能，但是SASS還提供了「繼承」的功能，以下是一個範例。

.error border:1px#f00; background:#fdd; .error.intrusion font-size:1.3em; font-weight:bold; .badError @extend.error; border-width:3px; 上述範例轉換成CSS之後，將會產生下列文件。

.error,.badError{ border:1px#f00; background:#fdd; } .error.intrusion, .badError.intrusion{ font-size:1.3em; font-weight:bold; } .badError{ border-width:3px; } 除此之外，SASS還提供了多重繼承的功能。

由於SASS主要是用Ruby實作的，因此不像LESS一樣有提供立即在瀏覽器內用JavaScript轉換成CSS的功能，不過開放原始碼的領域無奇不有，或許也有人用JavaScript實作出SASS轉CSS的功能也說不定。

參考文獻 聊聊主流框架，Less/Sass/Compass/Bootstrap/H5bp 为您详细比较三个CSS预处理器（框架）：Sass、LESS和Stylus http://lesscss.org/ http://sass-lang.com/ Wikipedia:LESS層疊樣式表 http://sass-lang.com/guide 【本文由陳鍾誠取材並修改自維基百科，採用創作共用的姓名標示、相同方式分享授權】 程式人雜誌，採用創作共用：姓名標示、相同方式分享授權，歡迎加入雜誌社團