零运行时动态换肤在Sass中需预编译多套CSS文件并动态替换标签实现：1. 用独立入口文件（如light.scss/dark.scss）注入变量并导入共享样式；2. 构建工具分别编译输出；3. JS仅替换href属性预加载新CSS，避免闪屏；4. 主题变量须严格控制导入顺序或用map封装，且需覆盖字体、间距、动效等全设计系统属性。
零运行时动态换肤在 Sass 中无法真正实现——Sass 是编译时预处理器，所有样式必须在构建阶段确定；所谓“零运行时”实际指不依赖 JS 切换 class 或 CSS 变量更新，而是靠预编译出多套独立 CSS 文件 + HTML <link> 动态替换来达成。
为什么不能靠 @media 或 :root 变量实现“零运行时”
Sass 编译后生成的是静态 CSS。即使你用 $theme: dark + @if 控制输出，最终也只产出一套主题样式。若想支持亮/暗两套，就必须让 Sass 分别编译两次：一次传入 $theme: light，一次传入 $theme: dark。浏览器里切换主题时，不是 JS 改变变量值，而是 JS 替换整个 <link href="theme-dark.css"> 标签——这才是“零运行时”的实质：样式逻辑完全移出浏览器，CSS 文件本身无条件分支、无 JS 依赖。
常见错误现象：
- 写
:root { --color-bg: #fff; }+ JS 动态改document.documentElement.style.setProperty→ 这是运行时换肤，不符合“零运行时”定义 - 用
@media (prefers-color-scheme: dark)自动适配 → 仅响应系统偏好，无法手动强制切主题，且无法支持自定义主题（如“sepia”、“high-contrast”） - 把所有主题变量塞进一个 CSS 文件，靠
.theme-dark .card多层嵌套 → 文件体积膨胀、选择器权重失控、无法按需加载
用 Webpack + Sass 的 includePaths 和入口分离实现多主题编译
核心思路：为每个主题维护独立的入口 SCSS 文件（如 light.scss、dark.scss），它们只负责设置主题变量并导入共享样式；构建工具分别处理这些入口，输出对应 CSS 文件。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 目录结构保持清晰：
src/scss/themes/light.scss、src/scss/themes/dark.scss，内容仅含$primary-color: #007bff;等变量声明 +@import "../base" - Webpack 配置中用
MiniCssExtractPlugin分离输出：entry: { 'theme-light': './src/scss/themes/light.scss', 'theme-dark': './src/scss/themes/dark.scss' } - 避免在共享模块（如
_buttons.scss）里写@if $theme == dark—— 这会让编译逻辑耦合，难以复用；变量应由入口文件注入，共享模块只用$primary-color这类具体值 - 若用 Vite，可用
build.rollupOptions.input同样指定多个入口，配合scss.additionalData注入变量（但更推荐显式入口文件，可读性更强）
HTML 层如何安全切换主题而不闪屏
关键不是“怎么换”，而是“换的时候不破坏渲染流”。直接 link.remove() + link.add() 会触发重排重绘甚至白屏。
实操建议：
- 初始 HTML 中只保留一个
<link rel="stylesheet" href="theme-light.css" id="theme-stylesheet">，不预加载暗色版 - 切换前，先用
fetch('theme-dark.css')预加载新样式表（确保网络就绪），再执行替换 - 替换时用
link.setAttribute('href', 'theme-dark.css')而非删重建 —— 浏览器会静默更新样式，无闪烁 - 服务端可结合
Cookie或localStorage在首次 HTML 响应时就写入正确href，避免客户端首次渲染用错主题
注意 !default 和变量作用域的陷阱
很多人想用 $color-bg: #fff !default; 让不同主题文件覆盖它，但 Sass 的变量作用域规则会让这事不可靠：如果共享模块在主题文件之前被 @import，!default 就失效了。
真正可控的方式只有两种：
- 严格保证导入顺序：主题变量文件必须是第一个
@import，且所有共享模块都放在它之后 - 彻底放弃
!default，改用函数封装变量获取逻辑，例如@function theme-color($key) { @return map-get($theme-map, $key); }，并在每个主题入口里定义自己的$theme-map - 避免跨主题复用未加命名空间的变量名，比如
$red容易冲突，应统一用$theme-red或放入 map
最常被忽略的一点：字体、阴影、动画曲线等非颜色属性同样需要主题化，但容易只关注 $color- 系列变量而漏掉 $spacing-unit 或 $easing-theme —— 主题不只是换色，是整套设计系统的静态快照。
