局部变量必须定义在具体选择器内部，如.button { --color: red; }，孤立写--color: red;会报语法错误；作用域由声明位置决定，非类名匹配，推荐以组件根类（如.card-root）为容器统一声明并继承。
局部变量必须定义在具体选择器内部，不能靠class名“自动生效”
CSS变量的作用域完全由声明位置决定，不是靠类名匹配。写成 .button { --color: red; } 才算定义了局部变量；只写 --color: red; 会报语法错误。很多人误以为加个class前缀就自动限定作用域，其实根本不会解析——CSS不认这种孤立的--xxx写法。
常见错误现象：
- DevTools里看不到变量定义，
var(--color)显示为 invalid value - 浏览器控制台报
Invalid CSS property name - 变量被意外继承到无关元素上（因为误写在了宽泛选择器如
div或*里）
推荐用组件根类作为变量容器，子元素直接继承
像 .button-root 这种命名的根类，本质是人为划定的作用域边界。变量定义在这里，所有后代元素（包括 .button-icon、.button-label）都能自然读取，无需重复声明。
使用场景和实操建议：
立即学习“前端免费学习笔记（深入）”；
- 每个独立UI组件（按钮、卡片、表单控件）都配一个唯一根类，比如
.card-root、.modal-root - 变量全部定义在根类选择器内，避免散落在多个子选择器中（否则维护成本高，且容易覆盖冲突）
- 不要在根类里写具体样式，只放
--xxx定义；样式规则另起选择器，用var(--xxx)引用 - 示例：
.card-root { --card-bg: #fff; --card-shadow: 0 2px 8px rgba(0,0,0,0.1); } .card-root .card-body { background-color: var(--card-bg); box-shadow: var(--card-shadow); }
避免用 !important 覆盖变量值
!important 会切断变量继承链，在 DevTools 的 computed 面板里看不到变量来源，调试时完全无法追溯值从哪来。
更稳妥的做法：
- 通过更精确的选择器提升权重，比如把
.button:hover改成.button-root:hover，直接在根类上重设变量 - 利用层级关系：父级定义
--bg，子级用&:hover { --bg: darkblue; }，保持变量路径清晰 - 如果真要强制覆盖，优先用 JavaScript 动态设置：
el.style.setProperty('--bg', 'red')，它比!important更可控、可撤销
和 Sass/Less 变量混用时，别试图让它们“互通”
Sass 的 $primary 是编译期静态值，CSS 变量 --primary 是运行时动态属性，二者生命周期完全不同。你不能在 Sass 中写 color: var(--#{$var-name})，也不能在 CSS 里用 #{...} 插入 Sass 值。
实际协作方式：
- Sass 负责生成基础色板、断点、字体栈等固定配置，输出为
:root中的 CSS 变量 - 组件内部的局部变量（如
--button-padding）全用原生 CSS 变量，由 JS 或媒体查询动态调整 - 命名统一用小写+短横线，比如
--btn-padding，避免和 Sass 的$btn_padding混淆
局部变量真正难的不是写法，而是判断“这个变量该不该放在这里”。一个 --text-color 如果同时被按钮、标题、列表项用到，它就不该是局部变量——哪怕你把它塞进某个 class 里，也掩盖不了语义混乱的事实。
