像其他任何属性声明一样，旧版本的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
语法
: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;
Head️抬头！
由于插值会删除带引号的字符串中的引号，因此可能有必要将其包装在
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)}
