如何在SCSS中判断CSS变量是否存在且有值以动态覆写样式

• SCSS 是编译时运行的预处理器，你写的@if判断逻辑会在SCSS编译成CSS的阶段就执行完成，根本无法感知浏览器运行阶段才存在的CSS变量状态。
• 你代码里的var($variable)在SCSS编译时只会被识别为普通的非空字符串，所以@if条件永远为真，对应的属性声明一定会被编译输出。

你需要的效果完全可以依赖CSS原生规则实现，不需要在SCSS里加编译时判断：
当CSS变量不存在/无有效值时，对应的属性声明会被浏览器判定为无效声明，自动回退到之前生效的属性值，刚好匹配你的需求。

你可以直接把mixin简化成如下写法即可：

@mixin customize($property, $variable) {
  #{$property}: var(#{$variable});
}

最终编译后的CSS结构：

/* file1编译输出 */
.my-div {
  color: red;
}
/* file2编译输出 */
.my-div {
  color: var(--my-variable);
}

• 如果--my-variable存在且有有效值：后面的color: var(--my-variable)生效，覆盖前面的red。
• 如果--my-variable不存在/无有效值：后面的声明被浏览器判定为无效，自动沿用前面的red，不会产生任何样式影响。

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