CSS变量语法

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

Dart·Sass（Dart Sass）: ✓
LibSass: 从 3.5.0开始
rubySass: 从 3.5.0开始

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

SCSS
css
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
Sass
css
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;
}

Head️抬头！

由于插值会删除带引号的字符串中的引号，因此可能有必要将其包装在meta.inspect()函数中以保留其引号。

SCSS
Sass
css
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;
}