css預處理器--Sass,Less,Stylus

前言:

• Css自己不是一種編程語言,能夠用它開發網頁樣式,但不能編程,只是一行行單純的屬性描述,寫起來費事而且難組織和維護

• 很天然的,有人就開始在想,能不能給CSS像其餘程序語言同樣,加入一些編程元素,讓CSS能像其餘程序語言同樣能夠作一些預約的處理,這樣一來,就有了「CSS預處器（CSS Preprocessor）」

• Scss是sass3引入的新語法,其語法徹底兼容css3,而且繼承sass的強大功能

• Scss和sass是同一種東西,能夠理解爲它的一個升級,版本,有一些新功能,平時都稱爲sass

  不一樣點:

  • 文件擴展名不一樣,sass擴展名是.sass, scss擴展名是.scss

  • 語法書寫不一樣,sass以嚴格縮進式規則寫的 ,不帶大括號和分號,Scss的書寫和css書寫語法相似

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

1, 語法

• 默認 Scss 使用 .scss 擴展名,Less 使用 .less 擴展名

/* style.scss or style.less */
  h1 {
    color: #ffc 
  }

複製代碼

• Sass以嚴格縮進式規則書寫(不包含花括號和分號)

/* style.sass */
  h1
    color: #ffc
複製代碼

• Stylus 支持的語法更多樣性,默認使用 .styl 擴展名

/* style.styl */
  h1 {
    color: #ffc;
  }
/* 省略花括號 */
  h2
    color: #ffc;
/* 省略冒號和分號 */
  h3
    color #ffc
複製代碼

2, 變量

• Sass/Scss的變量必須是 $ 開始,變量名和值使用冒號隔開

$redColor: red;
$borderWidth: 1px;
 
a {
  color: $redColor;
  border: $borderWidth $redColor solid;
}
複製代碼

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

@redColor: red;
@borderWidth: 1px;
 
a {
  color: @redColor;
  border: @borderWidth @redColor solid;
}
複製代碼

• Stylus樣式中聲明變量無任何限定

可使用「$」符號開始,變量值之間能夠用冒號、空格隔開,結尾的分號(;)無關緊要,但變量名和變量值之間的等號(=)是須要的

若是咱們使用「@」符號開頭來聲明（0.22.4）變量,Stylus會進行編譯,但其對應的值並不會賦值給變量,也就是說,在Stylus中不要使用「@」符號開頭聲明變量

redColor = red;
borderWidth = 1px;
a {
  color: redColor;
  border borderWidth @redColor solid
}
複製代碼

上面的三種不一樣的 CSS 預處理器的寫法,最終都將產生相同的結

a {
  color: red;
  border: 1px red solid;
}
複製代碼

3, 嵌套

• 在css中咱們寫有層級關係的樣式

header {
  margin: 10px;
}
header nav {
  height: 30px;
}
header nav a {
  color: #ccc;
}
header nav a:hover {
  color: red;
}
複製代碼

• 用css預處理器,會方便不少,三個都支持嵌套的寫法

header {
  margin: 10px;
  nav {
    height: 30px;
    a {
      color: #ccc;
      &:hover {
        color: red;
      }
    }
  }
}
複製代碼

4, 混入(Mixins)

• Scss混入

@mixin error($borderWidth: 2px) {
  border: $borderWidth solid #F00;
  color: #F00;
}
 
.generic-error {
  @ include error(); /* Scss混入 */
}
.login-error {
  @ include error(5px); /* Scss混入 5px*/
}
複製代碼

• Less混入

@mixin error(@borderWidth: 2px) {
  border: @borderWidth solid #F00;
  color: #F00;
}
 
.generic-error {
  .error(); /* Less混入 */
}
.login-error {
  .error(); /* Less混入 5px*/
}
複製代碼

• Stylus 的混入

error(borderWidth= 2px) {
  border: borderWidth solid #F00;
  color: #F00;
}
 
.generic-error {
  error();
}
.login-error {
  error(5px);
}
複製代碼

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

.generic-error {
  border: 2px solid #f00;
  color: #f00;
}
.login-error {
  border: 5px solid #f00;
  color: #f00;
}
複製代碼