CSS預處理器實踐之Sass、Less比較

什麼是CSS預處理器？

CSS可讓你作不少事情，但它畢竟是給瀏覽器認的東西，對開發者來講，Css缺少不少特性，例如變量、常量以及一些編程語法，代碼難易組織和維護。這時Css預處理器就應運而生了。Css預處理器定義了一種新的語言將Css做爲目標生成文件，而後開發者就只要使用這種語言進行編碼工做了。預處理器一般能夠實現瀏覽器兼容，變量，結構體等功能，代碼更加簡潔易於維護。 「我應該選擇哪一種css預處理器？」是最近網上的一大熱門話題，不少人爲此爭論不休。相比過去咱們對是否應該使用Css預處理器的話題，這已是很大的進步了。目前比較流行的兩種預處理器是Sass和Less。

至於他們誰更優秀一些：簡短的答案是:Sass

稍長一點的答案：Sass比其餘任何預處理器語言都好，但若是你正在使用Less，這也很酷！這能夠證實你正在使用預處理器來寫幫助本身寫更好的代碼。

很是長的答案：請繼續往下看

使用以前須要學習的知識 – Ruby，js，命令行等等

使用Css預處理器惟一真正須要學習的只有語法，SASS是Ruby語言寫的，可是二者的語法沒有關係。不懂Ruby，照樣可使用。你須要的只是一個像CudeKit的應用來觀察和編譯你所撰寫的文件。 Less就更不用了，只須要調用一個js便可(在客戶端運行)，或者藉助Node.js（服務器運行）。

獲勝者：無。

對css3的幫助

Css3提供了不少新特性，好比漸變、動畫、圓角等等，可是在使用這些高級特性的時候，咱們每每須要編寫瀏覽器前綴( -moz-、-webkit-、-ms- …)。不論Sass和Less，你均可以用本身的混合來編寫瀏覽器前綴。可是在項目中當咱們須要修改這些繁瑣的前綴時，咱們如何不用返回每一行代碼而且更新它們？你大概也不會更新手工混合的文件。可是在Sass中，咱們可使用開源的Css框架Compass，Compass會自動更新並自動處理瀏覽器前綴。咱們只須要保持更新，外加偶爾按一下編譯鍵，它就會幫助咱們自動處理全部的前綴問題，絕不費力。

獲勝者：Sass。

邏輯/循環

Less能夠作防護型混合，這種混合只在條件爲真的狀況下生效。好比你想根據文本顏色來設置背景色，當文本色比較淺的時候背景色很深，文本色比較深的時候背景色很淺。那麼你就得把混合分紅兩部分，以確保有一種狀況條件爲真，使混合生效。

.set-bg-color (@text-color) when (lightness(@text-color) >= 50%) {
  background: black;
}
.set-bg-color (@text-color) when (lightness(@text-color) < 50%) {
  background: #ccc;
}

而後就能夠獲得想要的背景：

.box-1 {
  color: #BADA55;
  .set-bg-color(#BADA55);
}

Less模擬循環和遞歸:

.loopingClass (@index) when (@index > 0) {
  .myclass {
    z-index: @index;
  }
  // 遞歸
  .loopingClass(@index - 1);
}
// 中止循環
.loopingClass (0) {}
   
// 輸出
.loopingClass (3);

生成的css代碼：

.myclass {z-index: 3;}
.myclass {z-index: 2;}
.myclass {z-index: 1;}

但這也就是Less所有的邏輯和循環處理能力了，而Sass具備真正的語言處理能力。包括if/then/else、for循環、while循環，函數等等。

真正的For循環：

@for $i from 1 through 3{
  .item-#{$i}{
    width:100px*$i;
  }
}
Css:
.item-1{width:100px;}
.item-2{width:200px;}
.item-3{width:300px;}

例如Compass框架有一個叫「background」的混合，它會給你全部你須要的和想要的，而且兼容全部瀏覽器的代碼。

簡潔易懂的代碼：

.bam {
  @include background(
    image-url("foo.png"),
    linear-gradient(top left, #333, #0c0),
    radial-gradient(#c00, #fff 100px)
  );
}

如今輪到這個怪物了（不幸的是，咱們須要它，看看咱們會獲得的Css代碼吧）：

.bam {
  background: url("/foo.png"), -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #333333), color-stop(100%, #00cc00)), -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 100, color-stop(0%, #cc0000), color-stop(100%, #ffffff));
  background: url("/foo.png"), -webkit-linear-gradient(top left, #333333, #00cc00), -webkit-radial-gradient(#cc0000, #ffffff 100px);
  background: url("/foo.png"), -moz-linear-gradient(top left, #333333, #00cc00), -moz-radial-gradient(#cc0000, #ffffff 100px);
  background: url("/foo.png"), -o-linear-gradient(top left, #333333, #00cc00), -o-radial-gradient(#cc0000, #ffffff 100px);
  background: url("/foo.png"), -ms-linear-gradient(top left, #333333, #00cc00), -ms-radial-gradient(#cc0000, #ffffff 100px);
  background: url("/foo.png"), linear-gradient(top left, #333333, #00cc00), radial-gradient(#cc0000, #ffffff 100px);
}

獲勝者：Sass

繼承

當你聲明一個包涵一些樣式的類以後，你想要另一個和它只有少量不一樣的類，在less中你能夠這樣寫

.module-a{
 color:#333;
}
.module-b { 
 .module-a(); /* 把module-a全部的css代碼拷貝到這裏 */
 border: 1px solid red; 
}
這樣.module-b便繼承了.module-a的全部屬性 生成的Css代碼:
.module-a{
 color:#333;
}
.module-b { 
 color:#333;
 border: 1px solid red; 
}

這在本質上就是繼承，在Sass中也能夠作一樣的事情。但Sass的"@extend"更好一些，在"@extend"中.module-a的樣式不只僅是被複制到.module-b(能夠擴展)中，在Css中對.module-a的定義被修改成.module-a,.module-b（這樣作選擇器的效率更高）。

Sass代碼

.module-a {
  /* 一堆css代碼 */
} 
.module-b { 
  /* 一些覆蓋和擴展代碼 */
  @extend .module-a; 
}
最終編譯Css代碼
.module-a, .module-b {
  /* 一堆css代碼 */
 }
.module-b {
  /* css代碼*/
}

結果是Sass重寫的選擇器效率更高 獲勝者：Sass 

變量

變量前綴：less使用"@",sass使用"$"。在css中@符號有繼承的意義，而美圓符號沒有。咱們能夠說這個是我的喜愛。可是沒有混淆概念的Sass在這裏更有優點。 不過Sass的變量範圍有些古怪，若是你在局部環境中重寫了一個全局變量，全局變量的值會被改變。

$color: black;
.scoped {
  $color: white;
  color: $color;
}
.unscoped {
  // LESS = black (仍然是一開始定義的值black)
  // SASS = white (被改寫爲white)
  color: $color;
}

獲勝者：Less

媒體查詢

咱們開始使用媒體查詢的方式是在主樣式表的底部加入針對媒體查詢的媒體代碼塊。這樣作頗有用，可是它會致使響應的樣式和原有的樣式風格脫節。 CSS代碼：

.some-class {
   /* 基礎樣式 */
}
    
/* 不少行之後 */
    
@media (max-width: 800px) {
  .some-class {
    /* 響應樣式 */
  }
}

經過Sass或者Less，咱們能夠用嵌套把他們寫到一塊兒：

.some-class {
  /* 基礎樣式 */
  @media (max-width: 800px) {
    /* 響應樣式 */
  }
}

經過Sass，咱們甚至能夠更牛逼一點，用一種更酷的寫法：

=respond-to($name)
   
  @if $name == small-screen
    @media only screen and (min-width: 320px)
      @content
   
  @if $name == large-screen
    @media only screen and (min-width: 800px)
      @content

而後，咱們能夠經過這種技術使代碼更加簡潔和語義化

.column

     width : 25%

     +respond-to(small- screen )

       width : 100%

須要Sass 3.2的環境（安裝方法，在Start Command Prompt with Ruby中輸入「gem install sass –pre」）

運算

在大多數狀況下，數學運算都是很類似的。可是sass和less在處理單位的適合還有些不一樣。例如less會假設第一個單位是你想要的，忽略後一個:

div {

    width : 100px + 2em ; // == 102px (怪異之處)

}

可是在Sass中，你會獲得一個明確的錯誤提示：不兼容的單位"px"和"em"。我想是否應該提示錯誤是值得商榷的，可是相比之下我更但願獲得錯誤，特別是當我在處理難以追查的變量的時候。 sass容許咱們使用未知單位，可是less不能夠。同時它們還有一些其餘的不一樣之處，好比sass如何爲有單位的值作乘法，但這些都過於簡單，不值得繼續討論。

勝利者：Sass

綜上，雖然Sass比less稍難上手，但若是要使用Css預處理器的話，多花點時間在Sass上面是值得的。

英文原文:http://css-tricks.com/sass-vs-less/

參考資料:http://sass-lang.com/

本文出自:http://cued.xunlei.com/log044