css变量无块级作用域，其“局部性”依赖选择器匹配顺序和继承链向上查找；在目标选择器中重新声明同名变量即可覆盖，生效的是最后匹配且优先级最高的声明。
什么是CSS变量的局部作用域
CSS变量（--my-color）默认是级联的，不是“作用域封闭”的——它没有像JS let 那样的块级作用域。所谓“局部覆盖”，本质是利用CSS优先级和继承机制，在某个选择器内部重新声明同名变量，让后代元素读取到新值。
关键点：变量本身不绑定元素，只绑定在匹配的选择器上；子元素通过 var(--my-color) 读取时，会沿祖先链向上查找最近一次有效声明。
怎么在特定选择器里重写变量值
直接在目标选择器里用 :root 或更具体的选择器重新赋值即可。不需要额外语法，就是重复声明。
-
:root声明的是全局默认值，适合兜底 - 在
.card里写--primary: #007bff，那么所有.card内部的var(--primary)就会取这个值，除非被更内层的选择器再次覆盖 - 如果同时存在多个同名变量声明，生效的是**最后匹配且未被更高优先级覆盖**的那个（比如
.card.red比.card优先级高）
:root {
--text-color: #333;
}
.card {
--text-color: #222; /* 局部覆盖开始 */
}
.card .title {
color: var(--text-color); /* 读到 #222 */
}
.card.warning .title {
--text-color: #d32f2f; /* 进一步局部覆盖 */
}
容易踩的坑：继承失效和计算时机
CSS变量不会自动“继承”给非后代元素，也不会在伪元素或 Shadow DOM 中跨边界透传。另外，变量值是在计算样式阶段解析的，不是运行时动态重算。
- 变量必须声明在能被
var()所在元素“看到”的祖先上；.btn::before无法读取.btn的变量，除非显式继承：.btn::before { --icon-size: 16px; } - 不要指望
calc(var(--gap) * 2)在媒体查询里自动响应变化——变量变了，calc会立刻重算，但前提是变量声明本身已更新 - 在
@keyframes里不能用var()，浏览器不支持（截至2024年主流版本） - IE完全不支持CSS变量，如需兼容，得用 PostCSS 插件降级或 fallback 值：
color: #333; color: var(--text-color, #333);
何时该用变量覆盖，何时该换类名
变量覆盖适合主题切换、设计系统中可配置的原子属性（颜色、间距、圆角）；但若逻辑分支多、组合爆炸（比如 5 种状态 × 3 种尺寸 × 2 种变体），用变量维护成本反而高，此时直接切类名更可控。
- 推荐用变量管理
--spacing-xs、--color-success这类基础设计令牌 - 避免用变量控制“是否显示”：
--is-hidden: hidden是反模式，应该用.hidden { display: none; } - 动画中频繁变更的值（如滚动偏移）不适合用 CSS 变量驱动，性能不如
transform+ requestAnimationFrame
变量的“局部性”靠的是选择器匹配顺序和继承链，不是语法隔离。真正难的不是怎么写，而是判断哪些值值得抽成变量、哪些该留给 class 控制——这需要对组件粒度和设计约束有实际感知。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
