CSS变量（--*）是唯一能在不同类名间真正共享+覆盖的机制；Sass/Less变量只在编译期存在，无法跨类名“传递”或“重写”，因其编译后即替换为静态值，不具运行时继承与层叠能力。
直接结论：CSS变量（--*）是唯一能在不同类名间真正共享+覆盖的机制；Sass/Less变量只在编译期存在，无法跨类名“传递”或“重写”。
为什么class="a b"里改--color能影响.b但改$color不行
CSS变量是运行时继承+层叠的，只要两个类作用于同一元素（比如<div class="btn primary">），它们共享同一个DOM节点的样式上下文。:root定义的--color会被所有后代读取，而.primary { --color: red; }会局部覆盖它——这个覆盖对同元素上其他类（如.btn）也生效，因为变量作用域是元素级，不是类级。
Sass变量（$color）在编译时就被替换成具体值，.btn { color: $color; }和.primary { color: $color; }最终生成的是两行独立的color: #3b82f6;，彼此毫无关联。改$color值会影响所有用到它的地方，但无法让.primary临时“覆盖”.btn里的颜色逻辑。
- 想让
.btn默认用--color，.primary激活时改--color——可行，靠CSS变量层叠 - 想让
.btn默认用$color，.primary激活时换一个Sass变量——不可行，Sass不支持运行时分支
:root、组件级--*和!important的覆盖优先级关系
变量覆盖不是靠!important，而是靠**定义位置 + 继承链深度**。浏览器按以下顺序解析：
立即学习“前端免费学习笔记（深入）”；
-
:root { --c: blue; }→ 全局基础值 -
.card { --c: green; }→ 卡片内所有子元素读到green（继承） -
.card .title { color: var(--c); }→ 读到green，不是blue -
.card .title:hover { --c: red; }→ 悬停时.title自己及后代读red
注意：!important不能用于var(--c)右侧，只能用于声明本身：.title { --c: red !important; }。但滥用!important会破坏可维护性，优先用更具体的父级选择器控制变量作用域。
Less/Sass里模拟“类间变量共享”的实际做法
如果你必须用预处理器（比如项目已锁定Less），又想让多个类感知同一套配置，唯一可靠方式是：把变量抽到单独文件，被所有类文件@import，且确保导入顺序一致。
- 建
variables.less，只放@primary-color: #3b82f6;这类基础值 -
button.less和header.less都以@import "variables.less";开头 - 禁止在
button.less里再@import "header.less"——这会打乱变量注入时机 - 若需“覆盖”，用
@primary-color: #ef4444;重新赋值（Less允许重复定义，后定义生效），但仅限当前文件作用域
这种做法本质是编译期复制，不是运行时共享。一旦JS动态切换主题，它完全无响应——这是CSS变量不可替代的核心价值。
容易被忽略的坑：变量名冲突与作用域泄漏
多人协作时，--primary和--primary-color看似一样，但它们是两个独立变量。更隐蔽的是嵌套组件中未收束的&导致变量意外污染：
.theme-dark {
--text-color: #1f2937;
.card {
--bg-color: #f9fafb; /* 这个--bg-color对.card外的元素无效 */
}
.card__title {
color: var(--text-color); /* ✅ 正确继承 */
}
}
但如果写成：
.theme-dark {
--text-color: #1f2937;
.card {
.title { color: var(--text-color); } /* ❌ .title变成全局选择器，可能误伤其他.title */
}
}
真正安全的共享，必须依赖明确的作用域边界（如:root、组件根元素）和语义化命名（--theme-text-primary而非--text）。否则所谓“优雅”只是把问题延后到联调阶段才爆发。
