重大變更：CSS 變數語法

舊版的 LibSass 和 Ruby Sass 解析自訂屬性宣告的方式與解析其他屬性宣告的方式相同，允許在值中使用所有 SassScript 表達式。但這與 CSS 不相容。

相容性
Dart Sass
✓
LibSass
自 3.5.0 版本起
Ruby Sass
自 3.5.0 版本起

CSS 規範允許在自訂屬性宣告中使用幾乎任何字元字串。即使這些值可能對任何 CSS 屬性沒有意義，它們也可以從 JavaScript 讀取。當它們被解析為 SassScript 值時，原本在純 CSS 中有效的語法就無法解析。例如，Polymer 函式庫使用這個方法來支援純 CSS mixin。

程式碼遊樂場

SCSS 語法

:root {
  --flex-theme: {
    border: 1px solid var(--theme-dark-blue);
    font-family: var(--theme-font-family);
    padding: var(--theme-wide-padding);
    background-color: var(--theme-light-blue);
  };
}

CSS 輸出

:root {
  --flex-theme: {
    border: 1px solid var(--theme-dark-blue);
    font-family: var(--theme-font-family);
    padding: var(--theme-wide-padding);
    background-color: var(--theme-light-blue);
  };
}

為了提供與純 CSS 的最大相容性，較新版本的 Sass 要求自訂屬性值中的 SassScript 表達式必須寫在插值中。插值也適用於舊版 Sass，因此建議所有樣式表都使用插值。

程式碼遊樂場

SCSS 語法

$accent-color: #fbbc04;

:root {
  // WRONG, will not work in recent Sass versions.
  --accent-color-wrong: $accent-color;

  // RIGHT, will work in all Sass versions.
  --accent-color-right: #{$accent-color};
}
程式碼遊樂場

Sass 語法

$accent-color: #fbbc04

:root
  // WRONG, will not work in recent Sass versions.
  --accent-color-wrong: $accent-color

  // RIGHT, will work in all Sass versions.
  --accent-color-right: #{$accent-color}

CSS 輸出

:root {
  --accent-color-wrong: $accent-color;
  --accent-color-right: #fbbc04;
}

⚠️ 注意！

因為插值會移除引號字串的引號，因此可能需要將它們包裝在 meta.inspect() 函式中以保留其引號。

程式碼遊樂場

SCSS 語法

@use "sass:meta";

$font-family-monospace: Menlo, Consolas, "Courier New", monospace;

:root {
  --font-family-monospace: #{meta.inspect($font-family-monospace)};
}
程式碼遊樂場

Sass 語法

@use "sass:meta"

$font-family-monospace: Menlo, Consolas, "Courier New", monospace

:root
  --font-family-monospace: #{meta.inspect($font-family-monospace)}

CSS 輸出

:root {
  --font-family-monospace: Menlo, Consolas, "Courier New", monospace;
}