認識 CSS 預處理器 ( Less、Sass、SCSS )

熟悉 CSS 語法之後，就可以開始使用 CSS 預處理器輔助撰寫 CSS，這篇教學會介紹三種 CSS 預處理器：Less、Sass 和 SCSS，透過基本的介紹、簡單的程式碼示例和差異比較表格，讓大家理解 CSS 預處理器的實用性和差異，進而增強 CSS 管理和編輯的能力。

快速導覽：

• 什麼是 CSS 預處理器？
• 主流的 CSS 預處理器：Less、Sass、SCSS
• Less、Sass 和 SCSS 的差異

什麼是 CSS 預處理器？

CSS 預處理器是一種擴展 CSS 功能的腳本語言，可以提高 CSS 的可維護性和重用性，開發者能夠更有效率的撰寫程式碼，CSS 預處理器雖然在提升樣式編寫效率和可維護性方面具有顯著優勢，但也伴隨著學習和使用上的挑戰。下方列出相關的優缺點比較：

優點：

• 變數：可以定義重複使用值（ 如顏色、字體大小等 ），讓樣式更具一致性和可維護性。
• 巢狀語法：使用巢狀結構，讓程式碼更具可讀性，更容易理解樣式的層級關係。
• 混合 ( Mixins )：將 CSS 樣式屬性封裝並互相混合，方便重複使用。
• 運算函式：提供更多的運算函式，增加靈活性。
• 模組化：將樣式分門別類在多個文件中，提高整體組織性和可維護性。

缺點：

• 學習曲線較長：對於新手來說，需要先掌握 CSS 才能有效掌握預處理器的語法。
• 編譯過程有門檻：編譯過程會增加開發流程的複雜性，並需要額外的工具和設定。
• 可能影響網頁效能：使用預處理器可能會生成較大的 CSS 文件，影響網頁效能。
• 可能過度依賴：開發者可能過度依賴預處理器，導致 CSS 變得過於複雜冗長。
• 本兼容性問題：預處理器的版本更新可能會導致某些功能的變更。

主流的 CSS 預處理器：Less、Sass、SCSS

目前主流的 CSS 預處理器有兩種，分別是 Less 和 Sass，由於 Sass 的語法和 CSS 差異較大，因此許多網頁開發者會轉向使用 Sass 延伸出另外的語法 SCSS，以下使用效果完全相同的簡單程式碼，分別透過 Less、SCSS、Sass 預處理器撰寫，最後會顯示轉換成的 CSS 長相，但需要注意，雖然使用預處理器撰寫大量 CSS 時可能較為方便，最終仍然會轉換成純粹的 CSS，因此仍然不支援即時的動態數值更新。

Less：

@color-1: red;
@color-2: blue;
@size-30px: 20px;
h1 {color: @color-1;}
h2 {color: @color-2;}
.fn(){
  em {
    font-size: @size-30px;
    color: gray;
  }
}
.a {.fn();}
.b {.fn();}

SCSS：

$color-1: red;
$color-2: blue;
$size-30px: 20px;
h1 {color: $color-1;}
h2 {color: $color-2;}
@mixin fn {
  em {
    font-size: $size-30px;
    color: gray;
  }
}
.a { @include fn;}
.b {@include fn;}

Sass：

$color-1: red
$color-2: blue
$size-30px: 20px
h1
  color: $color-1
h2
  color: $color-2
=fn
  em
    font-size: $size-30px
    color: gray
.a
  +fn
.b
  +fn

等同 CSS 程式碼

h1 {color: red;}
h2 {color: blue;}
.a em, .b em {
  font-size: 20px;
  color: gray;
}

Less、Sass 和 SCSS 的差異

Less、Sass 和 SCSS 預處理器的差異如下表所示：

小結

這篇教學介紹了 CSS 預處理器的基本概念及其優缺點，希望能讓大家對這些 CSS 預處理器的功能和優勢有了更深入的了解。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～