不能只靠class命名管理组件，因会导致修改分散、主题色难统一、深色模式需js干预；应通过:root定义全局变量、组件内重定义局部变量、伪类覆盖变量值，并用sass@mixin专注结构逻辑、颜色等全由var()读取实现解耦。
为什么不能只靠 class 命名来管理按钮/卡片/表单这类组件？
硬写 .btn-primary、.card-large、.form-error 会导致三类问题：改一个圆角要搜 12 处；换主题色得手动改所有 background-color；深色模式下必须 JS 切类或写两套规则。CSS 变量不是锦上添花，是解耦样式职责的基础设施。
如何用 :root + var() 搭建可继承的样式骨架？
关键不是“定义变量”，而是按作用域分层声明：
-
:root定义全局基线值（如--font-size-base: 16px、--color-brand: #3b82f6），所有组件默认继承 - 组件容器（如
.card）内重定义局部变量（--card-padding: 1.5rem），子元素直接var(--card-padding)即可响应式继承 - 禁用状态、悬停态等伪类不写死颜色，而是覆盖变量：
.btn:disabled { --btn-opacity: 0.4; }，再在btn基础样式里写opacity: var(--btn-opacity, 1);
Sass @mixin 和 CSS 变量怎么配合才不打架？
常见错误是把变量当参数传进 mixin，比如 @include btn($bg: #3b82f6) —— 这样反而锁死了动态能力。正确做法是：
- mixin 只负责结构逻辑（padding、border-radius、display），不碰颜色/尺寸数值
- 颜色、间距、字体全部从
var(--xxx)读取，例如：background-color: var(--btn-bg, #3b82f6); - 主题切换时，只改
:root或局部作用域的变量值，mixin 不动，组件自动响应 - 需要 fallback 时，
var(--btn-bg, #3b82f6)的第二个参数必须是具体值，不能是另一个var()
深色模式下 prefers-color-scheme 怎么和组件变量联动？
别写 .dark .btn 这种嵌套选择器。直接在媒体查询里覆盖变量：
@media (prefers-color-scheme: dark) {
:root {
--btn-bg: #1e40af;
--btn-text: #e0e7ff;
--card-bg: #1e293b;
}
}
组件内部完全不用感知深色模式存在——.btn 里的 background-color: var(--btn-bg) 会自动取新值。唯一要注意的是：所有变量必须有明确的初始值（哪怕只是 transparent），否则在未匹配媒体查询时会退化为 inherit 或失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
