重大变更：CSS 变量语法

早期版本的 LibSass 和 Ruby Sass 像解析任何其他属性声明一样解析自定义属性声明，允许使用完整范围的 SassScript 表达式作为值。但这与 CSS 不兼容。

Compatibility:
Dart Sass
✓
LibSass
since 3.5.0
Ruby Sass
since 3.5.0

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

Playground

SCSS Syntax

: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 Output

: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 中也能工作，因此建议在所有样式表中使用。

Playground

SCSS Syntax

$accent-color: #fbbc04;

:root {
  // 错误，在最新的 Sass 版本中不会工作。
  --accent-color-wrong: $accent-color;

  // 正确，在所有 Sass 版本中都能工作。
  --accent-color-right: #{$accent-color};
}
Playground

Sass Syntax

$accent-color: #fbbc04

:root
  // 错误，在最新的 Sass 版本中不会工作。
  --accent-color-wrong: $accent-color

  // 正确，在所有 Sass 版本中都能工作。
  --accent-color-right: #{$accent-color}

CSS Output

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

⚠️ Heads up!

因为插值会删除带引号字符串的引号，可能需要使用 meta.inspect() 函数来保留其引号。

Playground

SCSS Syntax

@use "sass:meta";

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

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

Sass Syntax

@use "sass:meta"

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

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

CSS Output

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