css变量比scss变量更适合换肤，因其支持运行时动态更新、作用域可控、无需重编译；scss变量是编译时静态值，无法响应实时操作或prefers-color-scheme联动。
因为 CSS 变量支持动态更新、作用域可控、无需重复编译样式，且能配合 JavaScript 实时切换主题，比预编译的 SCSS 变量或 class 切换更轻量、更灵活。
为什么不能直接用 SCSS 变量做换肤？
SCSS $color-primary 是编译时静态值，最终输出的是固定 CSS，无法在运行时修改。一旦生成 CSS 文件，所有颜色就固化了，换肤必须重新请求整套样式文件或刷新页面。
- 每次换肤都要生成多套 CSS bundle，打包体积膨胀明显
- 无法响应用户实时操作（比如点击按钮立刻变色）
- 暗色/亮色模式自动检测（
prefers-color-scheme）无法联动更新 SCSS 变量
CSS 变量如何实现“一键换肤”？
核心是把皮肤配置抽成一组 :root 变量，再用 JavaScript 动态重写它们的值。浏览器会自动重绘所有依赖这些变量的元素。
:root {
--brand-color: #ff6b35;
--bg-color: #ffffff;
--text-color: #333333;
}
.btn {
background-color: var(--brand-color);
color: var(--text-color);
}
- 换肤只需执行
document.documentElement.style.setProperty('--brand-color', '#4ecdc4') - 支持按需更新单个变量，不影响其他样式逻辑
- 可持久化到
localStorage，刷新后仍保留用户选择
换肤时容易忽略的兼容性与性能点
CSS 变量本身兼容性没问题（Chrome 49+、Firefox 31+、Safari 9.1+），但实际落地常踩三个坑：
- IE 完全不支持，必须提供降级方案（如 fallback 值：
color: #333; color: var(--text-color);） - 大量使用
var(--x)+calc()组合时，在低端 Android WebView 中可能触发重排抖动 - 变量名未加命名空间（如误用
--color）易被第三方库覆盖，建议统一前缀如--shop-theme-
真正难的不是设几个 var()，而是把组件内所有可变色区域（包括 SVG fill、box-shadow、渐变 stop color）都收敛到同一套变量体系，并建立设计系统级的语义映射——这点多数团队只做了 70%，剩下 30% 在深色模式边缘 case 里突然崩掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
