Skip to main content

Sass/SCSS 介紹

什麼是 Sass/SCSS？​

Sass（Syntactically Awesome Style Sheets）是一種 CSS 預處理器，讓你以結構化、可維護的方式撰寫 CSS，提供變數、巢狀規則、Mixin 等功能，最後編譯成標準 CSS，供瀏覽器使用。

Sass 有兩種語法：

  1. Sass：使用縮進，無大括號 {} 和分號 ;。

  2. SCSS：與 CSS 語法相似，使用大括號和分號，較易上手。

以下以 SCSS 和 Sass 語法為主，並與純 CSS 比較。

為什麼要用 SCSS/Sass？​

  • 提高效率：變數、函數減少重複撰寫。

  • 更好維護：巢狀規則和模組化讓程式碼更有結構。

  • 進階功能：支援條件判斷、迴圈等。

  • 與 CSS 相容：編譯後生成標準 CSS。

SCSS 核心功能與範例​

1. 變數 (Variables)​

用 $ 定義變數，儲存重複使用的值。

SCSS 範例：

$primary-color: #3498db;
$font-size: 16px;

body {
  background-color: $primary-color;
  font-size: $font-size;
}

Sass 範例：

$primary-color: #3498db
$font-size: 16px

body
  background-color: $primary-color
  font-size: $font-size

2. 巢狀規則 (Nesting)​

將選擇器巢狀撰寫，程式碼更直觀。

SCSS 範例：

nav {
  background-color: $primary-color;

  ul {
    list-style: none;
    padding: 0;

    li {
      display: inline-block;
      margin-right: 10px;

      a {
        color: white;
        text-decoration: none;
      }
    }
  }
}

Sass 範例：

nav
  background-color: $primary-color

  ul
    list-style: none
    padding: 0

    li
      display: inline-block
      margin-right: 10px

      a
        color: white
        text-decoration: none

3. Mixin (混入)​

用 @mixin 定義可重用的樣式，@include 引用。

SCSS 範例：

@mixin button-style($bg-color, $text-color) {
  background-color: $bg-color;
  color: $text-color;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.primary-button {
  @include button-style(#3498db, white);
}

.secondary-button {
  @include button-style(#2ecc71, black);
}

Sass 範例：

@mixin button-style($bg-color, $text-color)
  background-color: $bg-color
  color: $text-color
  padding: 10px 20px
  border: none
  border-radius: 5px
  cursor: pointer

.primary-button
  @include button-style(#3498db, white)

.secondary-button
  @include button-style(#2ecc71, black)

4. 模組化 (Partials 和 @import)​

將樣式拆分成多檔，使用 @import 引入 partial 檔案（以 _ 開頭）。

SCSS 範例：
_variables.scss：

$primary-color: #3498db;
$font-size: 16px;

style.scss：

@import 'variables';

body {
  background-color: $primary-color;
  font-size: $font-size;
}

Sass 範例：
_variables.sass：

$primary-color: #3498db
$font-size: 16px

style.sass：

@import variables

body
  background-color: $primary-color
  font-size: $font-size

5. 運算與函數​

支援數學運算和內建函數，動態計算樣式。

SCSS 範例：

$base-size: 10px;

.container {
  width: $base-size * 10;
  padding: $base-size + 5px;
  background-color: lighten(#3498db, 20%);
}

Sass 範例：

$base-size: 10px

.container
  width: $base-size * 10
  padding: $base-size + 5px
  background-color: lighten(#3498db, 20%)

純 CSS、SCSS、Sass 三者比較​

特性純 CSSSCSSSass
語法使用大括號 {} 和分號 ;。與 CSS 相同，使用大括號和分號，與 CSS 高度相容。使用縮進，無大括號和分號，語法更簡潔但學習曲線稍高。
可讀性選擇器重複（如 nav ul li a），程式碼冗長。巢狀規則讓結構清晰，類似 HTML 層次。巢狀規則同 SCSS，但縮進語法更簡潔，適合偏好簡短語法的開發者。
重複使用樣式重複需手動複製，易出錯。變數（$primary-color）和 Mixin（@mixin button-style）可重用，減少重複程式碼。同 SCSS，支援變數和 Mixin，功能一致。
維護性修改樣式需逐一更改。修改變數值一次，全局更新。同 SCSS，變數和 Mixin 便於維護。
功能性僅支援基本樣式，無邏輯功能。支援運算、函數（如 lighten）、條件判斷等。同 SCSS，功能相同。
模組化所有樣式寫在單一檔案，難以管理。支援 partial 檔案和 @import，便於拆分。同 SCSS，支援 partial 和 @import。

總結​

SCSS 和 Sass 提供變數、巢狀、Mixin 等功能，讓 CSS 撰寫更高效、可維護。SCSS 因與 CSS 語法一致，適合大多數前端工程師；Sass 則以簡潔的縮進語法吸引偏好簡短語法的開發者。相較於純 CSS，SCSS 和 Sass 都提供更好的結構化與重用性，適合現代前端開發。