重大变更：CSS 变量 语法

较旧版本的 LibSass 和 Ruby Sass 解析自定义属性声明的方式与其他属性声明相同，允许将完整的SassScript 表达式 作为值。但这与 CSS 不兼容。

兼容性
Dart Sass
✓
LibSass
从 3.5.0 开始
Ruby Sass
从 3.5.0 开始

CSS 规范允许在自定义属性声明中使用几乎任何字符串。即使这些值对任何CSS 属性都没有意义，也可以从 JavaScript 访问它们。当它们被解析为 SassScript 值时，原本有效的纯CSS 语法无法解析。例如，Polymer 库 使用此方法来支持纯-CSS mixins

游乐场

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;
}