@if未输出样式通常因变量未定义、值不符合预期或作用域错误；需用@debug验证值，字符串比较必须加引号，sass假值仅null和false；@if须在合法css上下文中使用，不可在顶层或媒体查询内直接嵌套，且块内变量需提前声明。
@if 判断后没输出样式，大概率不是@if写错了，而是它根本没进分支，或者进了分支但变量作用域、嵌套位置、编译上下文出了问题。
变量未定义或值不符合预期
这是最常见原因：@if 看到的 $theme、$env、$use-flex 这些变量压根不存在，或者值是 null、""、0、未加引号的 dark（被当变量名解析）——结果整个分支被跳过，不报错也不输出。
- 写
@debug $theme;放在@if前，确认它有值且是字符串"dark"，不是dark（漏引号）或undefined - 字符串比较必须加引号：
@if $theme == "dark"✅，@if $theme == dark❌（Sass 会去找变量$dark） - Sass 的“假值”只有
null和false；0、""、()全是真值，别指望@if $flag { }在$flag: 0时跳过
@if 被放在非法位置
Sass 要求控制指令必须出现在能生成 CSS 的上下文中。把它塞进媒体查询内部、选择器深层嵌套里，或顶层无选择器包裹，都会导致编译失败或静默忽略。
- 错误：
@media (min-width: 768px) { @if $flex { display: flex; } }→ Dart Sass ≥ 1.70 直接报错 - 正确：把
@media整个包进@if：@if $flex { @media (min-width: 768px) { display: flex; } } - 选择器内允许
@if，但别嵌太深：.btn { &:hover { @if $hover-enabled { ... } } }容易触发解析歧义，建议提到外层 - 绝对不能在文件顶层（无选择器、无规则块）直接写
@if，否则不生成任何 CSS
变量作用域导致“赋了值却用不上”
@if 块内新声明的变量，只在块内有效。你以为 @if $dark { $color: #000; } 后面能用 $color，其实编译器看到的是未定义变量。
- 必须提前声明并初始化：
$color: null;，再在每个分支里重新赋值 - 漏掉
@else或某个分支没覆盖到，$color就保持null，后续color: $color编译成color: ;，浏览器直接忽略整条规则 - 如果变量来自
@use模块，确保用namespace.$var访问，或已通过as *正确导入
你以为它该运行，其实它早结束了
@if 是编译期开关，不是运行时逻辑。它读不到 prefers-color-scheme、localStorage、--theme 这些东西——它们在 Sass 编译完之后才存在。
-
@if var(--theme) == "dark"会报错，因为var()不是 Sass 函数 -
@if $theme == "dark"能生效，前提是构建工具（Webpack/Vite）已在编译前把$theme注入为确定值，比如通过--define=theme=dark - 最终 CSS 文件里没有
@if的任何痕迹，只有它选中的那部分代码；分支没命中，就是物理上不存在那几行 CSS
真正难排查的是：编译成功、没报错、也生成了 CSS，但样式没起作用——这时候得打开浏览器开发者工具，看计算出的属性值到底是什么、来自哪条规则，而不是盯着 Sass 源码猜。变量名拼错、单位丢失、CSS 层叠覆盖、插值漏 #{} ，都可能让“看似输出了”的样式实际无效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
