用 CSS 自定义属性（如 --color-primary）在 :root 下统一声明，带语义前缀、单位明确，配合 HTML class 切换主题，避免 JS 动态注入和混用预处理器变量，确保 SSR 首屏一致。
怎么在多个组件里复用同一套颜色/间距/字体？
直接用 CSS 自定义属性（--color-primary、--spacing-md）定义全局变量，比复制粘贴或重复写 var(--color-primary) 更可靠，也比预处理器的 $primary-color 更易跨技术栈共享。
- 所有变量必须声明在
:root选择器下，否则子组件无法继承（伪类、Shadow DOM 里要额外处理） - 变量名建议带语义前缀，比如
--size-font-sm比--fs12更易维护 - 避免在变量值里写单位混用，
--line-height-base: 1.5是无单位的，而--space-xs: 4px必须带单位
CSS变量和SCSS变量混用会出什么问题？
SCSS 变量在编译期就消失了，CSS 变量是运行时生效的——两者根本不在一个阶段，不能互相赋值。比如 $color: #007bff; :root { --color-primary: $color; } 这种写法在原生 CSS 中完全无效，只有 SCSS 编译器能识别 $color，但编译后它不会变成可运行的 CSS 变量。
- 想共用设计系统数值？把基础值抽成 JSON 或 JS 对象，再分别导入 SCSS 和生成
:root块 - 不要用
calc(var(--space-md) * 2)去“动态计算”变量，浏览器不支持对变量做运算，得提前算好再定义新变量 - Vue/React 组件内通过
style={{ '--color-bg': theme.bg }}动态注入时，注意字符串拼接漏单位（如传24而不是'24px'）
为什么修改CSS变量后，某些组件样式没更新？
常见原因是作用域覆盖或继承断裂：CSS 变量依赖级联和继承，父元素没声明、中间某层重写了同名变量、或用了 display: contents / replace 等破坏继承的属性，都会导致下游拿不到值。
- 用浏览器 DevTools 的 Computed 面板查
--color-text实际解析值，看它来自哪条规则，而不是只看 Styles 面板里的声明 - Shadow DOM 内部默认不继承
:root变量，需手动在:host或::part()上设置 - 媒体查询里改变量（如
@media (prefers-color-scheme: dark) { :root { --color-text: #fff; } }）必须确保该查询块被正确加载，Webpack/Vite 的 CSS 提取插件有时会误删空规则
如何让CSS变量适配主题切换且不闪屏？
关键不是“换变量”，而是“换变量的源头”。把主题数据存在 document.documentElement 的 dataset 或 class 上，用 CSS 类选择器驱动变量切换，比 JS 批量 setProperty 更稳定、更少触发重排。
立即学习“前端免费学习笔记（深入）”；
- 推荐模式：
+.theme-dark { --color-bg: #1e1e1e; }，切换时只改 class，不操作 style - 避免在 JS 里循环遍历所有组件节点去 setStyle，性能差且容易漏掉动态插入的节点
- 服务端渲染（SSR）场景下，首次 HTML 必须包含对应主题的 class 和变量声明，否则首屏会先按默认主题渲染，再跳变
CSS 变量本身很简单，难的是让它在组件边界、构建流程、主题逻辑和 SSR 多层之间保持一致——多数问题不出在语法，而出在谁在什么时候、以什么方式往哪里写了哪个值。
