CSS預編譯器

Du9191發表於2022-05-01
CSS編譯

零.CSS預編譯器

CSS前處理器是指對生成CSS前的某一語法的處理。CSS前處理器用一種專門的程式語言，進行Web頁面樣式設計，然後再編譯成正常的CSS檔案，供專案使用

CSS前處理器為CSS增加一些程式設計的特性，如增加了規則、變數、混入、選擇器、繼承等等特性，無需考慮遊覽器的相容性問題

 有助於更好地組織管理樣式檔案，以及更高效地開發專案

下面介紹主流的CSS預編譯器三劍客：

一. CSS預編譯器三劍客（Sass、Less、Stylus)

　　Sass：Sass包括兩套語法。最開始的語法叫做"縮排語法"，使用縮排來區分程式碼塊，並且用回車將不同規則分隔開（不使用{}和；）。

　　而新的語法叫做“SCSS”，使用和CSS類似的塊語法，使用大括號將不同的規則分開，分號將具體的樣式分開。這兩套語法通過.sass和.scss兩個副檔名區分開

　　1.使用：

　　　　通過VSCode安裝Live Sass Compiler外掛等方法...

　　2.CSS功能擴充套件：

2.1：巢狀規則

Sass 允許將一套 CSS 樣式巢狀進另一套樣式中，內層的樣式將它外層的選擇器作為父選擇器，例如：

#main {
  width: 97%;

  p, div {
    font-size: 2em;
    a { font-weight: bold; }
  }

  pre { font-size: 3em; }
}

巢狀功能避免了重複輸入父選擇器，而且令複雜的 CSS 結構更易於管理，編譯後：

#main {
  width: 97%; 
}
#main p, #main div {
    font-size: 2em; 
}
#main p a, #main div a {
      font-weight: bold; 
}
#main pre {
    font-size: 3em; 
}

2.2：父選擇器&

在使用2.1巢狀規則時，有時也需要使用巢狀外層的父選擇器，例如，給某個元素設定hover樣式時

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}

編譯後：CSS 檔案中&將被替換成巢狀外層的父選擇器，如果含有多層巢狀，最外層的父選擇器會一層一層向下傳遞

a {
  font-weight: bold;
  text-decoration: none; 
}
a:hover {
    text-decoration: underline; 
}
body.firefox a {
    font-weight: normal; 
}

#main {
  color: black; 
}
#main a {
    font-weight: bold; 
}
#main a:hover {
      color: red; 
}

2.3：屬性巢狀

個別 CSS 屬性遵循相同的名稱空間 (namespace)，比如 font-family, font-size, font-weight 都以 font 作為屬性的命名空間。

為了便於管理這樣的屬性，同時也為了避免了重複輸入，Sass 允許將屬性巢狀在名稱空間中，例如：

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

　　編譯為：

.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; 
}

2.4：變數$

Sass最普遍的用法就是變數，以$開頭，複製與css屬性寫法一樣，直接呼叫即可 

$width: 100px


#main {
  width: $width;
}

變數支援塊級作用域，巢狀規則內定義的變數只能在巢狀規則內使用（區域性變數），不在巢狀規則內定義的變數則可在任何地方使用

（全域性變數）

將區域性變數轉換為全域性變數可以新增 !global 宣告：

#main {
  $width: 5em !global;//區域性變數轉全域性變數
  width: $width;
}

#sidebar {
  width: $width;
}

編譯為:

#main {
  width: 5em;
}

#sidebar {
  width: 5em;
}

2.5：運算

所有資料型別均支援 == 或 != ,此外，每種資料型別也有各自支援的運算方式

目前感覺這個運算用處不大，但今後遇到某個專案也可能會用到

2.6：@-Rules與指令

2.6.1：Sass 擴充了 @import 的功能，允許其匯入 SCSS 或 Sass 檔案，被匯入的檔案將合併編譯到同一個 CSS 檔案中，

另外，被匯入的檔案中所包含的變數或者混合指令 (mixin) 都可以在匯入的檔案中使用。

@import "foo.scss";

@import "foo";

都會匯入檔案foo.scss

如果需要匯入SCSS或者Sass檔案，但不希望編譯成CSS檔案，在檔名前新增下劃線即可

例如，將檔案命名為 _colors.scss，便不會編譯成_colors.css 檔案。

2.6.2：Sass 中 @media 指令與 CSS 中用法一樣，只是增加了一點額外的功能：允許其在 CSS 規則中巢狀

如果 @media 巢狀在 CSS 規則內，編譯時， @media 將被編譯到檔案的最外層，包含巢狀的父選擇器

這個功能讓 @media 用起來更方便，不需要重複使用選擇器，也不會打亂 CSS 的書寫流程

@media 可以使用 Sass（比如變數，函式，以及運算子）代替條件的名稱或者值：

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

編譯為：

.sidebar {
  width: 300px; 
}
@media screen and (orientation: landscape) {
    .sidebar {
      width: 500px; 
    } 
}

2.6.3：@extend ，告訴 Sass 將一個選擇器下的所有樣式繼承給另一個選擇器。 

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

2.7：Mixin

Mixin用於定義可重複使用的樣式，避免了使用無語意的 class，比如.float-left

混合指令可以包含所有的 CSS 規則，絕大部分 Sass 規則，甚至通過引數功能引入變數，輸出多樣化的樣式

混合樣式中也可以包含其他混合樣式

2.7.1：定義Mixin 

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

2.7.2：引用Mixin

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

編譯為：

.page-title {
  font-family: Arial;
  font-size: 20px;
  font-weight: bold;
  color: #ff0000;
  padding: 4px;
  margin-top: 10px; 
}

2.7.3：Mixin引數 

@mixin sexy-border($color, $width：10px) { //預設值
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue, 1in); }

編譯後

p {
  border-color: blue;
  border-width: 1in;
  border-style: dashed; 
}

@Mixin 可以用 = 表示，而 @include 可以用 + 表示

2.8：函式

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }
#sidebar {width: 240px; } //編譯結果

Less：Less是一門向後相容的CSS擴充套件語言，語法上和Sass有很大的共性，它受Sass的影響，但對後來引入的SCSS格式有影響

Stylus：在 stylus 中同樣可以使用變數、函式、判斷、迴圈一系列 CSS 沒有的東西來編寫樣式檔案，使用時需要Node.js

基本使用：

$background-color = lightblue
add (a, b = a)
    a = unit(a, px)
    b = unit(b, px)
    a + b

.list-item
.text-box
    span
        background-color: $background-color
        margin: add(10)
        padding: add(10, 5)
    &:hover
        background-color: powderblue

編譯後

.list-item span,
.text-box span {
  background-color: #add8e6;
  margin: 20px;
  padding: 15px
}
.list-item:hover,
.text-box:hover {
  background-color: #b0e0e6;
}

PostCSS：一個用 JavaScript 工具和外掛轉換 CSS 程式碼的工具

特點：

    • 增加程式碼的可讀性：可自動新增屬性字首
    • 可使用最新的CSS語法，如變數定義
    • 可模組化CSS，CSS Modules
    • 可檢查CSS語法錯誤，避免出錯
    • 強大的格子系統LostGrid

二.異同點

Less與Sass的異同：

　　異：

    • 混入(Mixins)——class中的class
    • 引數混入——可以傳遞引數的class，就像函式一樣
    • 巢狀規則——Class中巢狀class，從而減少重複的程式碼
    • 運算——CSS中用上數學
    • 顏色功能——可以編輯顏色
    • 名字空間(namespace)——分組樣式，從而可以被呼叫
    • 作用域——區域性修改樣式
    • JavaScript 賦值——在CSS中使用JavaScript表示式賦值

同：

    • Less是基於JavaScript，是在客戶端處理的；Sass是基於Ruby(一種簡單快捷的物件導向的指令碼語言)，是在伺服器端處理的
    • 關於變數在Less和Sass中的唯一區別就是Less用@，Sass用$
    • 輸出設定，Less沒有輸出設定，Sass提供4中輸出選項：nested, compact, compressed 和 expanded
    • Sass支援條件語句，可以使用if{}else{},for{}迴圈等等，而Less不支援

 三.總結

為CSS增加一些程式設計的特性，如規則、變數、混入、選擇器、繼承等等特性，上手都很簡單

(CSS的除錯，需要編譯，檔案過大都是前處理器的缺點)

 

參考：

　　Stylus的基本使用

　　Less與Sass的異同？

　　什麼是CSS前處理器？

　　Sass中文網

相關文章