CSS自定义属性（如--color-primary）是现代浏览器支持的“CSS变量”，需定义在:root中以实现全局生效，使用var()函数调用，支持fallback；JS可动态修改其值实现主题切换，而Sass变量仅编译时替换、无法运行时更新。
用 CSS 自定义属性（--color-primary）替代传统变量
CSS 本身不支持编程式变量，但现代浏览器普遍支持的自定义属性（Custom Properties）就是事实上的“CSS 变量”。它们必须以 -- 开头，且只在声明它的作用域内生效。全局统一控制的关键是把它们定义在 :root 伪类里——它等价于 html 元素，是整个文档的根作用域。
常见错误是写成 body { --color-primary: #007bff; }，这会导致子元素无法在未显式继承或重设作用域时读取该值；或者误以为自定义属性能像 Sass 变量一样直接参与计算（比如 width: var(--size-base) * 2;），其实不能，必须配合 calc() 或预处理器。
- 推荐写法：
:root { --color-primary: #007bff; --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; } - 使用时必须用
var()函数：color: var(--color-primary);、margin: var(--spacing-md); - 支持 fallback 值：
background-color: var(--color-surface, #ffffff);，当--color-surface未定义时回退为白色
如何让主题色切换不重刷页面——动态更新 :root 的值
纯 CSS 无法响应用户操作自动变色，但 JS 可以实时修改 :root 上的自定义属性，所有引用该变量的样式会立即重绘。这是实现暗色模式、品牌换肤最轻量的方式，无需重复写两套 CSS 规则。
容易踩的坑是直接操作 document.documentElement.style.setProperty() 却忘了清除旧值，或在组件级作用域里覆盖了全局变量却没做好隔离。另外，服务端渲染（SSR）场景下，JS 还未执行前，页面会先按默认 :root 值渲染，可能造成闪屏。
立即学习“前端免费学习笔记（深入）”；
- 切换主题示例：
document.documentElement.style.setProperty('--color-primary', '#ff6b35'); - 批量设置更稳妥：
Object.entries(theme).forEach(([key, value]) => { document.documentElement.style.setProperty(`--${key}`, value); }); - 若需 SSR 支持，服务端应根据请求上下文提前注入对应
:root声明，或用prefers-color-scheme媒体查询做初始判断
为什么不用 CSS 预处理器（如 Sass）管理变量？
Sass 的 $color-primary 在编译时就被替换成具体值，最终输出的 CSS 里不带任何变量痕迹。这意味着：无法运行时修改、无法通过 JS 控制、无法实现主题热切换。它适合构建期确定不变的设计系统，但不满足“统一控制且可动态调整”的需求。
另一个现实约束是维护成本：如果团队已用原生 CSS + 自定义属性落地了一套设计 token，再引入 Sass 就要多一道构建流程，还可能因变量名冲突（比如 Sass 变量和 CSS 自定义属性同名但值不同）导致调试困难。
- 适用 Sass 的场景：
font-size: $font-size-lg * 1.2;这类需要编译期计算的逻辑 - 适用 CSS 自定义属性的场景：
transition: background-color 0.2s ease, color 0.2s ease;+ 动态改--color-primary - 混合使用也行：Sass 生成基础 token 文件，再导出为 CSS 自定义属性供运行时使用
间距与字体层级怎么避免硬编码——建立可组合的 scale 系统
直接写 margin: 12px; 或 font-size: 1.125rem; 会让设计语言失去一致性。应该把间距、字体大小抽象成有语义的缩放步进（scale），比如 --spacing-1 到 --spacing-8，或 --text-xs 到 --text-xxl，再通过命名约定体现比例关系（如 --spacing-2 = 2 * var(--spacing-unit)）。
关键不是数字本身，而是这些值之间是否形成可预测的节奏。很多人定义了一堆零散变量，却没规定它们之间的倍率关系，结果设计师改一个基准值，开发要手动算七八个衍生值。
- 推荐线性 scale 示例：
:root { --spacing-unit: 4px; --spacing-1: calc(var(--spacing-unit) * 1); --spacing-2: calc(var(--spacing-unit) * 2); --spacing-4: calc(var(--spacing-unit) * 4); --spacing-8: calc(var(--spacing-unit) * 8); } - 字体层级建议用 rem 基准 + 变量组合：
font-size: calc(var(--text-base) * 1.25);，其中--text-base设为1rem - 避免过度分层：超过 8 个间距变量或 6 个字体变量后，记忆和选择成本陡增，反而降低效率
真正难的不是定义变量，而是让所有人（设计师、前端、后端模板）始终引用同一套 token 源，并在各平台（Web/iOS/Android）保持语义对齐。一旦某个 --color-error 在 Figma 里是红色，在代码里被悄悄改成橙色，问题就会从样式蔓延到用户体验判断。
