sass和less，優秀的前端樣式預處理器

        身爲切圖界的一員，或者說在前端界打滾了一段日子的你。會慢慢地發現。現在的css編寫已經不能知足本身的效率。

假設有更強大的框架，讓你的css更靈活和更easy複用和維護，那該多好啊。很是明顯，這個早已經不是什麼新奇事，sass和less就是這麼2個很是優秀的樣式預處理器。能讓你的效率高速提升。接下來就談談它們。

1.樣式預處理器的定義

樣式預處理器，簡單地來歸納就是技術大牛經過一門新的語言，讓css的編寫具有各類變量和屬性，你依照它的語法寫好後，就能編譯，生成對應的css文件。

固然這些處理器可以讓你的css更簡潔，易懂，具有更強的可移植性和維護性。

前端界裏面，譬如Sass、LESS、Stylus、Turbine、Swithch CSS、CSS Cacheer、DT CSS等都是上面所說的樣式預處理器。這裏不一一介紹，我僅僅說一下比較優秀的sass和less。

2.sass和less這對好基友

 2.1 sass的前世此生

SASS在07到08年就出現了，是對CSS3（層疊樣式表）的語法的一種擴充。它可以使用巢狀、混入、選擇子繼承等功能。可以更有效有彈性的寫出Stylesheet。Sass最後仍是會編譯出合法的CSS讓瀏覽可以使用。也就是說它自己的語法並不太easy讓瀏覽器識別（儘管它和CSS的語法很的像，差點兒同樣），因爲它不是標準的CSS格式。在它的語法內部可以使用動態變量等。因此它更像一種極簡單的動態語言。

2.2 less的前世此生

度娘告訴咱們，LESS是一種由Alexis Sellier設計的動態層疊樣式表語言。

LESS是開源的，其第一個版本號由 Ruby 寫成，但在興許的版本號其中。Ruby逐漸被替換爲 JavaScript 。受益於JavaScript。LESS可以在client上執行（IE6+、Webkit、Firefox），也可以在服務端執行（Node.js、Rhino）。

LESS與CSS較爲接近，一個合法的CSS代碼段自己也是一段合法的LESS代碼段。

LESS提供變量、嵌套、混合、操做符、函數等通常編程所需的抽象機制。

3.框架的對照

3.1 實現方式的不同

LESS和Sass的主要不一樣就是他們的實現方式。LESS是基於JavaScript，是在client處理的。然而。Sass是基於Ruby的，是在server端處理的。

很是多開發人員不會選擇LESS因爲JavaScript引擎需要額外的時間來處理代碼而後輸出改動過的CSS到瀏覽器。

但是LESS環境較Sass簡單。這也使得很多的童鞋選擇LESS。

3.2 語法上的共性

Sass和LESS都使用的是標準的CSS語法。

Sass使用「.scss」擴展名，而LESS使用「.less」擴展名。

3.2.1 變量

Sass聲明變量必須是「$」開頭，後面緊跟變量名和變量值，而且變量名和變量值需要使用冒號（：）隔開。

$a: 14px;
$b: #000;
$C: solid
.btn{
  width: $a;
  border: 1px $C $b;
}	

LESS聲明變量和Sass聲明變量差點兒相同。差異就是變量名前面使用是的「@」字符：

@a: 14px;
@b: #000;
@C: solid
.btn{
  width: @a;
  border: 1px @C @b;
}	

3.2.2 嵌套（Class中嵌套class，從而下降反覆的代碼）

body {
  padding: 5px;
  .head{
    height: 10px;
    a {
      color: #000;
      &:hover {
        text-decoration: underline;
      }
    }
  }
} 

SASS和LESS在嵌套語法上基本同樣，簡單快捷。

3.2.3 混入

在樣式預處理器裏面，你可以用一個變量。定義一段經常被用到的代碼，而後供其它樣式引用，方便快捷。這即是混入了。

在SASS裏面。

@mixin aq($borderWidth: 1px) {
  border: $borderWidth solid #F00;
}
.btn {
  padding: 5px;
  @include aq(2px);
}

在LESS裏面。

.aq($borderWidth: 1px) {
  border: $borderWidth solid #F00;
}
.btn {
  padding: 5px;
  .aq(2px);
}

3.2.4繼承

繼承和混入有點類似。

在SASS裏面，

.a {
  margin: 10px 5px;
  padding: 2px;
}
.b{
  @extend .a; 
  border: 1px solid #000;
}

在LESS裏面，

.a {
  margin: 10px 5px;
  padding: 2px;
}
.b{
  .a; 
  border: 1px solid #000;
}

3.2.5顏色函數

顏色函數是CSS預處裏器中內置的顏色函數功能，這些功能可以對顏色值進行處理，對於顏色的變亮、變暗、漸變顏色等處理都挺好用的。

好比在SASS裏面，

invert($color);     /* 返回$color的反相色 */
lighten($color, 50%); /* 返回的顏色在$color基礎上變亮50% */
saturate($color, 50%);   /* 返回的顏色在$color基礎上飽和度添加50% */
desaturate($color, 50%); /* 返回的顏色在$color基礎上飽和度下降50% */
grayscale($color);  /* 返回$color的灰度色*/
darken($color, 50%);  /* 返回的顏色在$color基礎上變暗50% */

在LESS裏面，

invert(@color);     /* 返回@color的反相色 */
lighten(@color, 50%); /* 返回的顏色在@color基礎上變亮50% */
saturate(@color, 50%);   /* 返回的顏色在@color基礎上飽和度添加50% */
desaturate(@color, 50%); /* 返回的顏色在@color基礎上飽和度下降50% */
grayscale(@color);  /* 返回@color的灰度色*/
darken(@color, 50%);  /* 返回的顏色在@color基礎上變暗50% */

3.2.6 運算

.a{
  padding: (100px/2);
  top: 10px + 100px;
  left: 100px - 50px;
  top: 10 * 10;
}  

事實上還有很是多細節的東西，有空我再慢慢補充了。

Author: Alone
Antroduction: 高級前端開發project師
Sign: 人生沒有失敗，僅僅有沒到的成功。