是否可以通过引用自身的方式定义CSS变量（自定义属性）？

问题原因 #

这不属于CSS的限制或Bug，是你的SCSS代码写法有误：

• SCSS不会自动解析var()函数内部的SCSS变量，你直接把$padding写在回退参数位置，编译后会原样输出到CSS文件中，浏览器无法识别$padding这个值，导致没有在body上定义--padding时，变量解析失败，样式不生效。

修复方案 #

使用SCSS的插值语法#{}包裹SCSS变量，强制SCSS编译时输出变量的实际值：

$padding: 1em;

:root {
  // 若HTML中已指定--padding则使用指定值，默认使用SCSS变量的值
  --padding: var(--padding, #{$padding});
}

编译后生成的原生CSS为：

:root {
  --padding: var(--padding, 1em);
}

修改后，未在body上设置--padding时会自动回退到1em，内联覆盖的逻辑也能正常生效。

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