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

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

 

一、什么是CSS預處理器

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

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

二、語法

　　在使用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

三、變量

　　你可以在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預處理器，修改一個地方就夠了。

四、嵌套

　　如果你需要在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