變數

Sass 變數很簡單：您將一個值賦予一個以 $ 開頭的名稱，然後您可以參考該名稱而不是值本身。儘管它們很簡單，但它們是 Sass 提供的最有用的工具之一。變數可以減少重複、進行複雜的數學運算、設定函式庫等等。

變數宣告看起來很像屬性宣告：它的寫法是 <variable>: <expression>。與只能在樣式規則或 at-規則中宣告的屬性不同，變數可以在任何您想要的地方宣告。要使用變數，只需將其包含在一個值中即可。

  SCSS

  Sass

  CSS

       程式碼遊樂場SCSS 語法$base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);

.alert {
  border: 1px solid $border-dark;
}

       程式碼遊樂場Sass 語法$base-color: #c6538c
$border-dark: rgba($base-color, 0.88)

.alert
  border: 1px solid $border-dark

CSS 輸出.alert {
  border: 1px solid rgba(198, 83, 140, 0.88);
}

⚠️ 注意！

CSS 有自己的變數，這與 Sass 變數完全不同。了解它們之間的差異！

Sass 變數都會被 Sass 編譯掉。CSS 變數會包含在 CSS 輸出中。
CSS 變數可以針對不同的元素具有不同的值，但 Sass 變數一次只有一個值。
Sass 變數是指令式的，這表示如果您使用一個變數，然後更改它的值，則較早的使用會保持不變。CSS 變數是宣告式的，這表示如果您更改值，它將會影響較早的使用和較晚的使用。

SCSS

Sass

CSS

     程式碼遊樂場SCSS 語法$variable: value 1;
.rule-1 {
  value: $variable;
}

$variable: value 2;
.rule-2 {
  value: $variable;
}

     程式碼遊樂場Sass 語法$variable: value 1
.rule-1
  value: $variable


$variable: value 2
.rule-2
  value: $variable

CSS 輸出.rule-1 {
  value: value 1;
}

.rule-2 {
  value: value 2;
}

💡 小知識

Sass 變數，如同所有 Sass 的識別符號，會將連字號和底線視為相同。這表示 $font-size 和 $font_size 指的是同一個變數。這是 Sass 早期版本的歷史遺留問題，當時它 *只* 允許在識別符號名稱中使用底線。當 Sass 加入對連字號的支援以符合 CSS 的語法時，為了簡化遷移，兩者被設定為等效。

預設值預設值永久連結

通常，當您為變數指定值時，如果該變數已經有值，則舊值會被覆寫。但如果您正在編寫 Sass 函式庫，您可能希望允許使用者在您使用函式庫變數產生 CSS 之前設定它們。

為了實現這一點，Sass 提供了 !default 旗標。這 *僅在* 變數未定義或其值為 null 時才會為變數指定值。否則，將使用現有的值。

設定模組設定模組永久連結

Dart Sass: 自 1.23.0 起
LibSass: ✗
Ruby Sass: ✗

目前只有 Dart Sass 支援 @use。其他實作的使用者必須改用 @import 規則。

使用 @use 規則載入模組時，可以使用 !default 定義的變數進行設定。Sass 函式庫通常使用 !default 變數來允許使用者設定函式庫的 CSS。

要載入具有設定的模組，請寫入 @use <url> with (<variable>: <value>, <variable>: <value>)。設定的值會覆寫變數的預設值。只有在樣式表頂層使用 !default 旗標編寫的變數才能進行設定。

  SCSS

  Sass

  CSS
SCSS 語法// _library.scss
$black: #000 !default;
$border-radius: 0.25rem !default;
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;

code {
  border-radius: $border-radius;
  box-shadow: $box-shadow;
}
// style.scss
@use 'library' with (
  $black: #222,
  $border-radius: 0.1rem
);
Sass 語法// _library.sass
$black: #000 !default
$border-radius: 0.25rem !default
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default

code
  border-radius: $border-radius
  box-shadow: $box-shadow

// style.sass
@use 'library' with ($black: #222, $border-radius: 0.1rem)



CSS 輸出code {
  border-radius: 0.1rem;
  box-shadow: 0 0.5rem 1rem rgba(34, 34, 34, 0.15);
}

內建變數內建變數永久連結

由內建模組定義的變數無法修改。

  SCSS

  Sass

       程式碼遊樂場SCSS 語法@use "sass:math" as math;

// This assignment will fail.
math.$pi: 0;

       程式碼遊樂場Sass 語法@use "sass:math" as math

// This assignment will fail.
math.$pi: 0

作用域作用域永久連結

在樣式表頂層宣告的變數是 *全域* 的。這表示在它們被宣告之後，可以在它們的模組中的任何位置存取它們。但並非所有變數都是如此。在區塊（SCSS 中的大括號或 Sass 中的縮排程式碼）中宣告的變數通常是 *區域* 的，並且只能在宣告它們的區塊內存取。

  SCSS

  Sass

  CSS

       程式碼遊樂場SCSS 語法$global-variable: global value;

.content {
  $local-variable: local value;
  global: $global-variable;
  local: $local-variable;
}

.sidebar {
  global: $global-variable;

  // This would fail, because $local-variable isn't in scope:
  // local: $local-variable;
}

       程式碼遊樂場Sass 語法$global-variable: global value

.content
  $local-variable: local value
  global: $global-variable
  local: $local-variable


.sidebar
  global: $global-variable

  // This would fail, because $local-variable isn't in scope:
  // local: $local-variable

CSS 輸出.content {
  global: global value;
  local: local value;
}

.sidebar {
  global: global value;
}

遮蔽遮蔽永久連結

區域變數甚至可以與全域變數使用相同的名稱宣告。如果發生這種情況，實際上有兩個名稱相同的不同變數：一個是區域的，另一個是全域的。這有助於確保編寫區域變數的作者不會意外更改他們甚至不知道的全域變數的值。

  SCSS

  Sass

  CSS

       程式碼遊樂場SCSS 語法$variable: global value;

.content {
  $variable: local value;
  value: $variable;
}

.sidebar {
  value: $variable;
}

       程式碼遊樂場Sass 語法$variable: global value

.content
  $variable: local value
  value: $variable


.sidebar
  value: $variable

CSS 輸出.content {
  value: local value;
}

.sidebar {
  value: global value;
}

如果您需要從區域作用域（例如在 mixin 中）設定全域變數的值，您可以使用 !global 旗標。標記為 !global 的變數宣告將 *始終* 指定給全域作用域。

  SCSS

  Sass

  CSS

       程式碼遊樂場SCSS 語法$variable: first global value;

.content {
  $variable: second global value !global;
  value: $variable;
}

.sidebar {
  value: $variable;
}

       程式碼遊樂場Sass 語法$variable: first global value

.content
  $variable: second global value !global
  value: $variable


.sidebar
  value: $variable

CSS 輸出.content {
  value: second global value;
}

.sidebar {
  value: second global value;
}

⚠️ 注意！

Dart Sass: 自 2.0.0 起
LibSass: ✗
Ruby Sass: ✗

舊版 Sass 允許對尚未存在的變數使用 !global。此行為已被棄用，以確保每個樣式表都宣告相同的變數，無論其如何執行。

!global 旗標只能用於設定已在檔案頂層宣告的變數。它 *不能* 用於宣告新的變數。

流程控制作用域流程控制作用域永久連結

在流程控制規則中宣告的變數具有特殊的作用域規則：它們不會遮蔽與流程控制規則同級的變數。相反地，它們只是賦值給這些變數。這使得有條件地賦值給變數，或在迴圈中累加值變得更加容易。

  SCSS

  Sass

  CSS

       程式碼遊樂場SCSS 語法$dark-theme: true !default;
$primary-color: #f8bbd0 !default;
$accent-color: #6a1b9a !default;

@if $dark-theme {
  $primary-color: darken($primary-color, 60%);
  $accent-color: lighten($accent-color, 60%);
}

.button {
  background-color: $primary-color;
  border: 1px solid $accent-color;
  border-radius: 3px;
}

       程式碼遊樂場Sass 語法$dark-theme: true !default
$primary-color: #f8bbd0 !default
$accent-color: #6a1b9a !default

@if $dark-theme
  $primary-color: darken($primary-color, 60%)
  $accent-color: lighten($accent-color, 60%)


.button
  background-color: $primary-color
  border: 1px solid $accent-color
  border-radius: 3px

CSS 輸出.button {
  background-color: rgb(116.96, 12.04, 48.16);
  border: 1px solid rgb(245.4696132597, 235.4309392265, 251.5690607735);
  border-radius: 3px;
}

⚠️ 注意！

流程控制作用域中的變數可以賦值給外部作用域中已存在的變數，但在流程控制作用域中宣告的新變數將無法在外部作用域中存取。即使您需要將變數宣告為null，也請確保在賦值之前已宣告該變數。

進階變數函式進階變數函式永久連結

Sass 核心函式庫提供了一些用於處理變數的進階函式。meta.variable-exists() 函式會回傳目前作用域中是否存在指定名稱的變數，而 meta.global-variable-exists() 函式也執行相同的操作，但僅限於全域作用域。

⚠️ 注意！

使用者有時會希望使用插值來根據另一個變數定義變數名稱。Sass 不允許這樣做，因為這會讓一眼看出哪些變數在哪裡定義變得更加困難。不過，您可以做的是定義一個從名稱到值的映射 (Map)，然後您可以使用變數存取它。

SCSS

Sass

CSS

     程式碼遊樂場SCSS 語法@use "sass:map";

$theme-colors: (
  "success": #28a745,
  "info": #17a2b8,
  "warning": #ffc107,
);

.alert {
  // Instead of $theme-color-#{warning}
  background-color: map.get($theme-colors, "warning");
}

     程式碼遊樂場Sass 語法@use "sass:map"

$theme-colors: ("success": #28a745, "info": #17a2b8, "warning": #ffc107)

.alert
  // Instead of $theme-color-#{warning}
  background-color: map.get($theme-colors, "warning")





CSS 輸出.alert {
  background-color: #ffc107;
}

變數

SCSS 語法

Sass 語法

CSS 輸出

⚠️ 注意！

SCSS 語法

Sass 語法

CSS 輸出

💡 小知識

預設值預設值永久連結

設定模組設定模組永久連結

SCSS 語法

Sass 語法

CSS 輸出

內建變數內建變數永久連結

SCSS 語法

Sass 語法

作用域作用域永久連結

SCSS 語法

Sass 語法

CSS 輸出

遮蔽遮蔽永久連結

SCSS 語法

Sass 語法

CSS 輸出

SCSS 語法

Sass 語法

CSS 輸出

⚠️ 注意！

流程控制作用域流程控制作用域 永久連結

SCSS 語法

Sass 語法

CSS 輸出

⚠️ 注意！

進階變數函式進階變數函式 永久連結

⚠️ 注意！

SCSS 語法

Sass 語法

CSS 輸出

流程控制作用域流程控制作用域永久連結

進階變數函式進階變數函式永久連結