@if 和 @else 仅在编译时根据变量值选择输出样式，无法一次编译生成多个 css 包；必须通过构建工具多次独立编译并传入不同变量值（如 --define=theme=dark）来实现主题差异化输出。
@if 和 @else 不会“输出多个 CSS 包”，它们只决定当前编译中哪段样式进最终 CSS 文件——要生成差异化包，必须跑多次独立编译，每次传入不同变量值。
编译时变量注入是前提
SCSS 的 @if 只在构建那一刻读取变量值，之后就固化进输出文件。你不能靠它“一次编译、多套输出”。关键操作是：用构建工具（如 Dart Sass CLI、Webpack、Vite）在命令行或配置里显式传参。
-
sass --define=theme=dark main.scss:dist/dark.css→ 生成暗色版 -
sass --define=theme=light main.scss:dist/light.css→ 生成浅色版 - Webpack 中用
DefinePlugin注入$theme: "enterprise"，再配合@if $theme == "enterprise" - 变量名必须带
$前缀，且值必须是字符串、布尔或数字字面量，比如--define=enable-transitions=true
@if 分支必须覆盖所有构建场景
如果你只写 @if $theme == "dark" 而没配 @else，那 $theme: "light" 时对应样式就完全不生成——不是留空，是彻底消失。常见漏点：
- 没写
@else导致某套主题样式缺失 - 字符串比较漏引号：
@if $theme == dark报错，应为@if $theme == "dark" - 布尔变量误用：
$debug: true合法，但@if $debug永远为真（Sass 中true、0、""都算真值），想判 false 得写@if $debug == false - 嵌套过深导致分支组合爆炸，建议把复杂逻辑抽成
@mixin或 map 遍历
避免和运行时逻辑混淆
别指望 @if 能读 document.documentElement.classList 或 prefers-color-scheme——它连 DOM 都没见过。典型误用：
-
@if var(--mode) == "dark"→ 编译失败，var()是 CSS 运行时函数，Sass 不解析它 -
@if $theme == localStorage.getItem("theme")→ Sass 没有localStorageAPI，这行直接报Undefined variable - 想让同一份 CSS 文件响应用户切换？必须用 CSS 自定义属性 + JS 切换 class，
@if只负责预生成好两套规则，比如.theme-dark .btn和.theme-light .btn
真正容易被忽略的是：变量作用域和注入时机。用 @use 引入的模块变量需加命名空间（如 vars.$theme），而通过构建工具注入的变量默认在全局作用域——如果两者同名，后者会覆盖前者，且不会报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
