@if不能实现运行时主题切换，它仅在编译时根据预设常量决定输出哪些css，无法响应用户点击、prefers-color-scheme或localstorage等运行时状态；真正可切换的主题需结合sass预设变量与js修改class或css自定义属性实现。
@if 不能实现运行时主题切换，它只在编译时决定哪些样式进最终 CSS 文件。你点击按钮、监听 prefers-color-scheme 或读取 localStorage，@if 都看不见——它早在浏览器打开前就执行完了。
为什么 @if $theme == 'dark' 不会随用户操作变色
常见错误现象：@if 块里的样式没生效，或切主题后页面毫无反应。
-
@if在你运行sass命令或启动Vite/Webpack时就执行完毕，此时document根本不存在 -
$theme必须是编译期已知的常量（如$theme: "dark";），不能来自localStorage、prefers-color-scheme或 JS 动态赋值 - 编译结果里不会保留
@if结构，只有它“选中”的那部分 CSS 被写入输出文件，其余被直接丢弃 - 即使用
vue-cli-plugin-style-resources-loader注入变量，也只是把变量提前塞进编译上下文，仍不等于运行时可变
@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规则
操作方式是用 CLI 分别跑两次编译：sass --define=theme=light main.scss:light.css 和 sass --define=theme=dark main.scss:dark.css。
想让主题真能“切换”，必须分两层实现
第一层（Sass）：预设好语义变量和主题 map，比如 $theme-dark: ("text": #e0e0e0, "bg": #121212)，所有组件样式都通过 map-get($theme, "text") 取值；第二层（JS + CSS）：用 JS 修改 document.documentElement.classList 或设置 style="--bg-color: #121212"，再配对应 CSS 规则。
最容易被忽略的是：Sass 编译结果里没有 @if 的任何痕迹，一旦忘了注释清楚哪个变量控制哪条分支，半年后自己都看不懂为什么某个按钮突然变色了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
