CSS变量应在:root中定义以确保全局生效，支持JS动态读写和主题切换；与Sass变量本质不同，不可混用；需注意作用域、优先级及命名规范。
怎么在多个组件里统一改一个颜色
直接用 CSS 变量（--primary-color 这种）声明颜色，再在各组件选择器里用 var(--primary-color) 引入。改一处变量值，所有用到的地方自动同步——前提是变量作用域覆盖得到。
常见错误是把变量写在某个组件的局部 :root 或局部选择器里，结果其他组件读不到。比如在 .header 里定义 --text-color，.sidebar 就取不到。
- 全局变量写在
:root里最稳妥，所有元素都能继承 - 如果要按主题切换（如暗色/亮色），可以把变量挂到
html[data-theme="dark"]这类属性选择器下 - 避免在
@media块里重复定义同一变量，容易覆盖混乱
CSS变量和预处理器变量（如Sass $color）有什么区别
运行时 vs 编译时。CSS 变量能在 JS 里动态读写（getComputedStyle、style.setProperty），Sass 变量编译完就没了，JS 拿不到。
使用场景差异明显：需要换肤、用户自定义主题、动画中渐变颜色，必须用 CSS 变量；纯静态样式复用，Sass 变量更轻量、IDE 支持更好（比如重命名自动更新）。
- 不能用 Sass 变量生成 CSS 变量名，比如
--#{$name}: #fff是无效语法 - CSS 变量不支持嵌套计算（
calc(var(--a) + var(--b))可以，但var(--a + --b)不行） - Sass 的
lighten($color, 10%)功能，CSS 变量得靠color-mix()或 HSL 调整，浏览器兼容性目前有限（color-mix()Chrome 111+）
为什么设置了CSS变量但没生效
最常踩的坑是作用域和优先级问题。变量必须在使用它的元素或其祖先上定义，且不能被同名变量覆盖。
比如你在 :root 定义了 --bg: #f0f0f0，但在某个组件里写了 .card { --bg: #fff; background: var(--bg); }，那这个 .card 用的就是局部值，不影响其他地方。
- 检查是否拼错变量名：
--color-primary和--color-primeary是两个变量 -
var(--x, red)的 fallback 值只在变量未定义或值非法时触发，不是“默认值”——已定义为transparent就不会回退到red - 内联样式里设变量（
style="--size: 16px"）优先级高于 CSS 文件中的:root定义
复杂组件中如何组织CSS变量结构
别堆在 :root 里一把梭。按语义分层：基础色、语义色、组件级变量。比如 --color-brand 是品牌蓝，--color-button-bg 是按钮背景，后者可基于前者计算：--color-button-bg: var(--color-brand);
组件内部变量尽量用局部作用域，比如 .modal { --modal-z-index: 1050; }，避免污染全局。尤其注意 z-index、spacing 这类易冲突的值。
- 基础色建议用 HSL 表示（
--color-brand-h: 200; --color-brand-s: 100%; --color-brand-l: 50%），方便用hsl(var(--color-brand-h), var(--color-brand-s), calc(...))调整明暗 - 避免用变量存复合值，比如
--shadow: 0 2px 4px rgba(0,0,0,0.1)看似方便，但无法单独调整模糊半径或透明度 - 组件库中对外暴露的变量名加前缀（
--mylib-color-success），减少项目集成时冲突
变量不是越多越好，真正会变的才抽出来。比如字体大小在响应式中频繁变化，适合用变量；但某个图标固定用 14px，硬编码反而更清晰。边界感比技巧更重要。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
