如何用Sass @if指令根据不同主题切换CSS样式的方法

明确给出结论：@if 指令并不能实现运行时主题切换。它仅在编译阶段决定哪些样式被纳入最终 CSS 文件。用户点击按钮也好，监听 prefers-color-scheme 也罢，甚至试图从 localStorage 读取配置，@if 都无法响应——因为它早在浏览器加载页面之前就已经执行完毕。

不少开发人员曾陷入这个误区：编写了 @if $theme == 'dark' 这样的分支，期望用户切换主题时页面随之变化，结果却毫无响应。根本原因在于：@if 的判定并非依据用户页面操作，而是由开发者在编译时预设好的。

为什么 @if $theme == 'dark' 无法随用户操作切换样式

常见错误表现：@if 块内的样式完全没有生效，或者切换主题后页面毫无变化。

• @if 在你运行 sass 命令、启动 Vite 或 Webpack 时即执行完毕，此时 document 对象尚不存在。
• $theme 必须在编译期定义为常量，例如 $theme: "dark";，而不能来自 localStorage、prefers-color-scheme 或任何 JavaScript 动态赋值。
• 编译输出中不会保留 @if 的条件结构，仅其“选中”的那部分 CSS 被写入文件，其余全部被丢弃。
• 即使借助 vue-cli-plugin-style-resources-loader 这类工具注入变量，也只能将变量纳入编译上下文，并不代表变量在运行时可变。

@if 的适用场景有哪些

实际上，@if 的最佳实践是用于构建期间的多版本打包，而非运行时控制。核心判断标准在于：你是否确实需要生成多份独立的物理 CSS 文件。

• 为不同品牌客户定制样式：@if $brand == "internal" { .header { background: #0052cc; } }
• 控制过渡动画是否启用：@if $enable-transitions { transition: all 0.2s ease; }
• 单位使用策略切换：@if $use-rem { font-size: 1rem; } @else { font-size: 16px; }
• 兼容性后备处理：仅当 $legacy-support 为 true 时，才编译 IE11 专用的 filter 规则

实际操作非常直接：通过命令行分别执行两次编译。sass --define=theme=light main.scss:light.css 和 sass --define=theme=dark main.scss:dark.css，即可生成对应主题的 CSS 文件。

要实现真正的主题切换，需采用两层分离架构

为了实现真正的运行时主题切换，我们需要将设计拆分为两个层次。

第一层为 Sass 层：预先定义好语义化变量和主题映射表（map）。例如 $theme-dark: ("text": #e0e0e0, "bg": #121212)，所有组件样式均通过 map-get($theme, "text") 获取对应值。这样编译产生的 CSS 已包含预置的、可直接使用的样式变量。

第二层为 JavaScript 与 CSS 层：通过 JavaScript 修改 document.documentElement.classList 或直接设置 style="--bg-color: #121212"，并配合相应的 CSS 规则来实现动态响应。

这里有一个容易被忽略的细节：Sass 编译结果中不会保留 @if 的任何痕迹。如果忘记注释清楚哪个变量控制哪条分支，半年后连您自己都可能无法理解为什么某个按钮样式突然改变。这提醒我们，编写此类代码时务必添加清晰准确的注释。