CSS Variables自定义属性回退值不生效，求排查问题原因

你这里的问题是循环引用导致CSS变量无效。

在:root里声明--color-primary: var(--color-primary, #ffc107);时，var()函数的第一个参数是变量本身，这会让浏览器陷入循环解析逻辑——它需要用--color-primary的值来定义--color-primary，但这个变量此时还没有有效值，最终浏览器会判定该变量无效，所以body中的background-color: var(--color-primary)相当于没有设置有效取值。

修正方案 #

方案1：直接定义默认值

如果只是需要给变量设置一个固定默认值，直接赋值即可：

:root {
    --color-primary: #ffc107;
}
body {
    background-color: var(--color-primary);
}

方案2：保留外部覆盖能力的正确写法

如果你的初衷是让变量支持外部覆盖，同时有默认 fallback 值，应该在使用变量时指定 fallback，而非定义变量时循环引用：

:root {
    /* 可选：这里可以留空，或者先定义一个基础值 */
    /* --color-primary: #ffc107; */
}
body {
    /* 当--color-primary未被外部定义时，自动使用#ffc107作为背景色 */
    background-color: var(--color-primary, #ffc107);
}

这样既保留了变量的可扩展性，又能确保默认值正常生效。

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