SCSS中实现CSS变量fallback的正确方式是先写静态值再写var()声明，而非生成var()字符串；需用@mixin封装双声明模式，显式传入与上下文匹配的fallback值，不可依赖变量作用域自动推导。
SCSS里不能直接用var(--x, fallback)生成fallback类名
很多人以为写个@mixin就能批量输出color: var(--text, #333);这种带fallback的声明，但问题在于：SCSS编译时var()是原样保留的，它不参与计算，也没法“展开”出color: #333;作为降级。真正的fallback必须是编译期就存在的冗余声明——也就是先写color: #333;，再覆盖写color: var(--text);。
所以关键不是“生成var()”，而是「按顺序插入两行」：旧值在前，CSS变量在后。浏览器会忽略不支持var()的那行，自然回退到上一行。
- 别试图让
@function返回var(--x, #fff)字符串然后插进属性——这只会产出无效的color: var(--x, #fff);，没冗余声明，IE11照样白屏 - 所有需要fallback的属性（
color、background-color、border等）都得手动补前置静态值 - 如果变量本身带单位（比如
--spacing: 12px），fallback值也必须带单位，否则calc(var(--spacing) * 2)在不支持处会整个失效
用@mixin封装双声明模式，避免手写重复
把「静态值 + var()」打包成可复用的@mixin，是最小侵入、最可控的方式。例如处理颜色：
@mixin color-var($prop, $var-name, $fallback) {
#{$prop}: $fallback;
#{$prop}: var(#{$var-name}, $fallback);
}
调用时：@include color-var(color, --text-color, #222); → 输出：
color: #222; color: var(--text-color, #222);
- 必须传
$fallback进来，不能在mixin里硬编码——不同组件的降级色往往不同 -
#{$prop}支持传border-color或background等复合属性，但注意background的fallback需完整（如background: #f0f0f0;），不能只写颜色 - 别给
$fallback设默认值（比如$fallback: #000），否则容易掩盖未传参错误，导致所有地方都降级成黑色
复杂fallback场景：当变量是calc()或rgba()表达式时
比如--bg-overlay: rgba(var(--rgb-primary), 0.1)，IE11不支持rgba()里的var()，更不支持calc()嵌套。这时fallback不能只给一个颜色，而要提供语义等价的简化版。
例如定义主色RGB三元组：--rgb-primary: 52, 152, 219;，那么--bg-overlay的理想fallback是#3498db（十六进制近似），而不是rgba(52,152,219,0.1)（IE11仍会崩）。
- 不要指望SCSS自动把
rgba(var(--rgb), 0.1)转成#3498db——这需要运行时JS或构建时PostCSS插件，SCSS做不到 - 对这类变量，建议在
:root里同步定义两个版本：--bg-overlay和--bg-overlay-fallback，由mixin读取后者作降级 - 如果项目已用PostCSS，可用
postcss-custom-properties插件自动注入fallback，但要注意它只处理简单变量，对calc()或函数调用依然无能为力
真正容易被忽略的点：CSS变量作用域与继承链断裂
很多人写了:root { --text: #222; }，又在某个.card里重定义--text: #444;，然后期望@include color-var(color, --text, #000)在.card里自动用#444作fallback——这是错的。
SCSS编译时根本不知道运行时--text会被谁覆盖，$fallback参数是静态传入的，和CSS变量作用域无关。
- 每个组件里调用
@include时，必须显式传入当前上下文预期的fallback值，比如@include color-var(color, --text, #444); - 如果组件依赖父级变量（如
[data-theme="dark"] .card下--text变深），那就得写两套@include调用，或用@if配合$theme变量做条件分支 - 最稳妥的做法：把fallback值从变量名解耦，改用语义命名，如
$card-text-fallback: #444;，而非试图从--text推导
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
