sass中@if判断走错分支主因是变量实际值与“真值”规则不匹配：仅null和false为假值，其余均为真值；需用@debug确认类型，显式比较并注意作用域、括号优先级及css变量不可编译期读取。
@if 判断布尔值走错分支，不是语法问题，而是 Sass 的“真值”规则和变量实际值不匹配。
确认变量真实值和类型，别信命名
你写的 $enabled 可能根本不是布尔值——它可能是字符串 "true"、数字 1、空字符串 ""，甚至未定义。Sass 中只有 null 和 false 是假值，其余全是真值。
- 在
@if前加一行@debug $enabled;，看控制台输出的到底是true、"true"还是"" - 避免写
@if $enabled == true—— 如果$enabled: 1，这个条件仍为真，但语义上你可能想排除它 - 更安全的写法是显式比类型：
@if $enabled == "true"（字符串）或@if $enabled == true（仅当确定传入的是布尔字面量） - 如果变量来自构建注入（如 Webpack），检查是否漏了引号：
$env: "production";✅，$env: production;❌（会被解析为变量$production）
别把 CSS 自定义属性当 Sass 变量用
@if var(--theme) == "dark" 这类写法直接报错，因为 var() 不是 Sass 函数，--theme 是运行时才生效的 CSS 变量，Sass 编译期根本看不到它。
-
@if $theme == var(--theme)同样无效——左边是 Sass 变量，右边是纯文本字符串，永远不等 - 真正响应暗色模式，得用运行时机制：
@media (prefers-color-scheme: dark)或 JS 切换body.theme-dark类，再配对应 CSS 规则 - 若想用 Sass 控制主题，必须提前注入
$theme: "dark"（构建时），而不是指望读取浏览器里的--theme
多条件判断必须加括号，否则逻辑错乱
Sass 不支持 JavaScript 那样的运算符优先级简写。@if $env == "prod" and $debug 看似合理，但实际解析顺序可能出人意料。
- 正确写法：
@if ($env == "prod") and ($debug == true)，每个子条件都用括号包住 - 漏括号可能导致
and被误判为连接两个独立表达式，分支行为完全偏离预期 - 复杂条件建议拆成变量先算好：
$isProdDebug: ($env == "prod") and ($debug == true); @if $isProdDebug { ... }
最常被忽略的：变量作用域陷阱
@if 块内声明的变量，外部完全不可见。你以为赋了值，结果后续使用时报 Undefined variable。
- 错误写法：
@if $mode == "dark" { $color: #000; } .text { color: $color; }→$color在块外未定义 - 正确做法：提前声明变量并覆盖：
$color: null; @if $mode == "dark" { $color: #000; } @else { $color: #fff; } .text { color: $color; } - 漏掉
@else不会报错，但未覆盖分支下$color保持null，后续使用可能静默失败
真正难的不是写出 @if，而是确保变量从注入、类型、作用域到最终使用，每一步都稳得住——尤其半年后回看代码，没人记得 $mode 是在哪一层构建配置里决定的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
