Sass 變數：$ 的宣告、取值與作用範圍

Q: 變數名稱的連字號和底線可以互換嗎？

可以。Sass 把 $font-size 與 $font_size 視為同一個變數，這是為了相容早期的寫法。雖然合法，但同一個專案還是應該統一用連字號，避免閱讀時誤以為是兩個變數。

Q: 為什麼在區塊裡改了變數，外面沒變？

在選取器或混入的區塊裡宣告變數，那個變數只在該區塊內有效，離開區塊就恢復原值。若真的需要改到外層的變數，要加上 !global 旗標，但這種寫法應該盡量避免。

Q: 變數可以放在 CSS 屬性名稱的位置嗎？

不能直接放。變數只能出現在屬性值的位置，想拿它組成屬性名稱、選取器或媒體查詢條件，必須用插值包起來，寫成 #{$name}。

Sass 變數以 錢字號 開頭，把一個值取個名字後重複使用。它與 CSS 自訂屬性最根本的不同是：它活在編譯期，編譯完成後產出的 CSS 裡完全找不到它的蹤跡，只剩下最終的值。

宣告與取值

scss

$brand: #2965f1;
$radius: 8px;

.btn {
  background: $brand;
  border-radius: $radius;
}

編譯後：

css

.btn {
  background: #2965f1;
  border-radius: 8px;
}

寫法就是 $名稱: 值;，取值時直接寫變數名。與 CSS 宣告一樣以分號結尾。

可以存什麼

Sass 變數不只能放色碼，七種資料型別都可以：

scss

$brand: #2965f1;              // 色彩
$base: 16px;                  // 帶單位的數字
$ratio: 1.5;                  // 純數字
$font: "Noto Sans TC", sans-serif; // list
$title: "文章標題";            // 字串
$is-dark: false;              // boolean
$shadow: null;                // null
$theme: (primary: #2965f1, danger: #e03131); // map

值為 null 的宣告會被丟掉

$shadow: null; 之後寫 box-shadow: $shadow;，這一行整個不會輸出。這個特性常拿來做「有給值才輸出」的混入參數。

命名慣例

慣例	說明
全小寫加連字號	`$font-size-base`，與 CSS 屬性的風格一致
連字號與底線等價	`$font-size` 與 `$font_size` 是同一個變數
由大到小排序	`$color-text-muted` 比 `$muted-text-color` 好找
私有變數加底線前綴	`$_internal`，表示不對外，見 `@use`

連字號與底線互通是相容包袱

$font-size 和 $font_size 指向同一個變數，這是早期 Sass 留下來的行為。合法歸合法，一份專案裡請只用一種寫法。

作用範圍

變數寫在檔案最外層就是全域，整個檔案（以及 @use 它的檔案）都拿得到；寫在任何一組大括號裡就是區域，只有那個區塊與它的巢狀子層看得到。

scss

$color: #333; // 全域

.card {
  $color: #2965f1; // 區域，只在 .card 這個區塊有效
  color: $color;   // #2965f1

  .title {
    color: $color; // #2965f1，子層看得到
  }
}

.footer {
  color: $color; // #333，外面完全不受影響
}

區塊裡同名的宣告是遮蔽，不是修改

上面的 .card 裡那一行沒有改到全域的 $color，只是在區塊內遮蔽掉它。真的要改到外層的變數得加 !global，用法與該避免的理由見變數旗標。

變數只能放在值的位置

這是最常踩的限制：

scss

$side: left;

.box {
  margin-#{$side}: 16px; // ✅ 用插值
  // margin-$side: 16px; // ❌ 編譯錯誤
}

屬性名稱、選取器、媒體查詢的條件都要用插值 #{} 包起來。

跨檔案共用

實務上變數會集中放在一個分部檔，其他檔案載入它：

scss

// _variables.scss
$brand: #2965f1;
$radius: 8px;

scss

// main.scss
@use "variables" as v;

.btn {
  background: v.$brand;
}

注意載入後要加 命名空間 前綴。細節見 @use，檔案該怎麼分見 abstracts 該放什麼。

與 CSS 自訂屬性的分工

比較項目	Sass 變數	CSS 自訂屬性
生效時機	編譯時就被替換掉	瀏覽器執行時
產出的 CSS	只留下最終的值	變數本身還存在
會不會繼承	不會，只看程式碼的作用範圍	會，可分區覆蓋
能否用 JavaScript 改	不行	可以
能否用在媒體查詢條件	可以	不行