css系列—sass,less,stylus

1.CSS預處理器

CSS預處理器是一種語言用來爲css增加一些變成的特性，無需考慮瀏覽器的兼容性問題，例如你可以在css中使用變量，簡單的程序邏輯，函數等等在編程語言中的一些基本技巧，可以讓你的css更加簡潔，適應性更強，代碼更直觀等諸多好處。

我們將會從語法、變量、嵌套、混入(Mixin)、繼承、導入、函數和操作符等方面分別對這三個框架進行比較介紹。

語法

變量

在 CSS 預處理器中聲明變量，並在整個樣式單中使用

Sass 的變量必須是 $ 開始，然後變量名和值使用冒號隔開，跟 CSS 的屬性一致：

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

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

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

Stylus 對變量名沒有任何限定，你可以是 $ 開始，也可以是任意的字符（但不能是@）

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

上面三種編譯後就是

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

嵌套

三個 CSS 框架都是允許嵌套語法

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

最終編譯的結果就是

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

Mixins (混入)

Mixins 有點像是函數或者是宏，當你某段 CSS 經常需要在多個元素中使用時，你可以爲這些共用的 CSS 定義一個 Mixin，然後你只需要在需要引用這些 CSS 地方調用該 Mixin 即可。

Sass 的混入語法：

/* Sass mixin error with (optional) argument $borderWidth which defaults to 2px if not specified */
@mixin error($borderWidth: 2px) {
  border: $borderWidth solid #F00;
  color: #F00;
}
 
.generic-error {
  padding: 20px;
  margin: 4px;
  @ include error(); /* Applies styles from mixin error */
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  @ include error(5px); /* Applies styles from mixin error with argument $borderWidth equal to 5px*/
}

Less 的混入語法：

/* LESS mixin error with (optional) argument @borderWidth which defaults to 2px if not specified */
.error(@borderWidth: 2px) {
  border: @borderWidth solid #F00;
  color: #F00;
}
 
.generic-error {
  padding: 20px;
  margin: 4px;
  .error(); /* Applies styles from mixin error */
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  .error(5px); /* Applies styles from mixin error with argument @borderWidth equal to 5px */
}

Stylus 的混入語法：

/* Stylus mixin error with (optional) argument borderWidth which defaults to 2px if not specified */
error(borderWidth= 2px) {
  border: borderWidth solid #F00;
  color: #F00;
}
 
.generic-error {
  padding: 20px;
  margin: 4px;
  error(); /* Applies styles from mixin error */
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  error(5px); /* Applies styles from mixin error with argument borderWidth equal to 5px */
}

最終它們都將編譯成如下的 CSS 樣式：

.generic-error {
  padding: 20px;
  margin: 4px;
  border: 2px solid #f00;
  color: #f00;
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  border: 5px solid #f00;
  color: #f00;
}