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

囧囧圖圖發表於2019-02-27
CSS

前言:

  • 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;
}
複製程式碼

相關文章