为何需要用#{...}转义SCSS颜色变量？求原因及文档出处

问题场景 #

当在SCSS中给CSS自定义属性（:root下的--css-color）赋值SCSS变量时，会出现变量未被替换的情况：

$color-test: #123456;

.case-1 {
  color: $color-test; // 正常解析为#123456
}

:root {
  --css-color: $color-test; // 编译后仍保留$color-test字符串
}

.case-2 {
  color: var(--css-color); // 因自定义属性值无效，无法正常显示颜色
}

原因解析 #

SCSS对CSS原生语法的处理有明确边界：

• 对于常规CSS属性值（比如.case-1里的color），SCSS会自动识别并替换其中的SCSS变量；
• 但CSS自定义属性（即CSS变量）的值属于原生CSS语法范畴，SCSS默认不会主动解析其中的SCSS变量——它会把$color-test当成普通字符串保留，因为CSS自定义属性本身支持动态赋值，SCSS不想破坏原生CSS的特性。

解决方法 #

使用SCSS的插值语法#{$variable}强制解析变量，这样SCSS会先将变量值替换后再注入到自定义属性中：

:root {
  --css-color: #{$color-test}; // 编译后变为--css-color: #123456;
}

官方文档依据 #

SCSS的插值语法（Interpolation）专门用于在默认不解析SCSS变量的场景中注入变量值，包括但不限于：

• CSS自定义属性的值
• CSS属性名（比如#{$property}: value;）
• 选择器（比如.#{class-name} {}）
  官方文档明确说明，插值是在原生CSS语法中嵌入SCSS动态值的标准方式。

内容的提问来源于stack exchange，提问作者Christian Wolf