明确给出结论：@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 的任何痕迹。如果忘记注释清楚哪个变量控制哪条分支，半年后连您自己都可能无法理解为什么某个按钮样式突然改变。这提醒我们，编写此类代码时务必添加清晰准确的注释。
