比較三個 CSS 預處理器：Sass、LESS 和 Stylus（上）

前沿 :　　第一次寫不夠成熟，可能描述有所錯誤，還請你們修改指正，我會對已完成的文章進行修改。

 

1、什麼是CSS預處理器

　　CSS預處理器定義了一種新的語言，基本的思想是用一種專門的編程語言，開發者只須要使用這種語言進行編碼工做，減小枯燥無味的CSS代碼的編寫過程的同時，它能讓你的CSS具有更加簡潔、適應性更強、可讀性更加、層級關係更加明顯、更易於代碼的維護等諸多好處。

　　CSS預處理器種類繁多，本次就以Sass、Less、Stylus進行比較。

2、語法

　　在使用CSS預處理器以前最重要的是瞭解語法，我只寫過stylus，就從網上找了下另外兩種語法的格式，與你們對比分享。

　　首先Sass和Less都是用的是標準的CSS語法，所以你能夠很方便的把已完成的CSS代碼轉爲預處理器識別的代碼，Sass默認使用 .sass擴展名，而Less默認使用.Less擴展名。

一下是二者的語法

/* style.scss or style.less */
h1 {
  color: #0982C1;
}

你注意到Sass同時也支持老語法，就是不包含花括號和分號的書寫格式。

/* style.sass */
h1
  color: #0982c1

然而Stylus支持的語法就更多樣性，它默認使用.styl的文件擴展名，下面是Stylus語法。

/* style.styl */
h1 {
  color: #0982C1;
}
 
/* omit brackets */
h1
  color: #0982C1;
 
/* omit colons and semi-colons */
h1
  color #0982C1

3、變量

　　你能夠在CSS預處理中聲明變量，並在整個樣式單中使用，支持任何類型的變量，例如：顏色、數值（是否包含單位）、文本。而後你能夠任意的調取和使用該變量。Sass的變量是必須$開始，而後變量名和值要冒號隔開，跟CSS屬性書寫格式一致。

$mainColor: #0982c1;
$siteWidth: 1024px;
$borderStyle: dotted;
 
body {
  color: $publicColor;
  border: 1px $borderStyle $mainColor;
  max-width: $siteWidth;
}

而Less的變量名使用@符號開始：

@mainColor: #0982c1;
@siteWidth: 1024px;
@borderStyle: dotted;
 
body {
  color: @publicColor;
  border: 1px @borderStyle @mainColor;
  max-width: @siteWidth;
}

　　Stylus對變量名沒有任何限定，你能夠是$開始，也能夠是任意字符，並且與變量值之間能夠用冒號、空格隔開，須要注意的是 Stylus (0.22.4) 將會編譯 @ 開始的變量，但其對應的值並不會賦予該變量，換句話說，在 Stylus 的變量名不要用 @ 開頭。　　

mainColor = #0982c1
siteWidth = 1024px
$borderStyle = dotted
 
body
  color mainColor
  border 1px $borderStyle mainColor
  max-width siteWidth

上面三種不一樣的CSS寫法，最終將會生成相同結果：

body {
  color: #0982c1;
  border: 1px dotted #0982c1;
  max-width: 1024px;
}

　　最容易體現它的好處的是，假設你在CSS中使用同一種顏色數十次，若是你要修改顯色，須要找到並修改十次相同的代碼，而有了CSS預處理器，修改一個地方就夠了。

4、嵌套

　　若是你須要在CSS中相同的parent引用多個元素，你須要一遍一遍的去寫parent。例如：

section {
  margin: 10px;
}
section nav {
  height: 25px;
}
section nav a {
  color: #0982C1;
}
section nav a:hover {
  text-decoration: underline;
}

然而若是用CSS預處理器，就能夠少些不少單詞，並且父節點關係一目瞭然。

section {
  margin: 10px;
 
  nav {
    height: 25px;
 
    a {
      color: #0982C1;
 
      &:hover {
        text-decoration: underline;
      }
    }
  }
}

stylus還可省略花括號，書寫更加方便，根據我的喜愛還可刪除中間冒號。

section 
  margin: 10px;
  nav 
    height: 25px;
    a 
      color: #0982C1;
      &:hover 
        text-decoration: underline;

最終生成CSS結果是：

section {
  margin: 10px;
}
section nav {
  height: 25px;
}
section nav a {
  color: #0982C1;
}
section nav a:hover {
  text-decoration: underline;
}

目前瞭解就這些，如有描述不正確地方還請你們指正，後續還會更新。

注：參考　　張鑫旭Stylue中文文檔http://www.zhangxinxu.com/jq/stylus/selectors.php

　　　　　　開源中國社區：https://www.oschina.net/question/12_44255