SCSS的@if无需强制配合@else使用，它是独立编译期指令，可单独存在；仅当需处理多分支逻辑时才用@else if或@else，嵌套过深应抽离为变量或函数。
SCSS的@if必须配合@else使用吗？
不是必须，但单独写 @if 而不加 @else 或 @else if 完全合法。SCSS 的条件指令是独立语句，不强制配对。常见错误是误以为它像 JavaScript 的 if/else 一样需要成对出现，结果多写了无意义的 @else {}，反而让逻辑变绕。
-
@if后面必须跟一个布尔表达式（如$theme == 'dark'），不能只写变量名 - 表达式里用
==判断相等，!=判断不等，and/or/not是逻辑运算符，不是&&或|| - 如果判断的是 map、list 等复杂值，记得用
map-has-key()或length()等内置函数辅助判断，直接写@if $map永远为 true（空 map 也非 false）
如何在@if中安全判断变量是否已定义？
不能用 @if $var 直接判，因为未定义变量会报错：Undefined variable: "$var". 正确做法是用 variable-exists() 函数：
@if variable-exists(theme-color) {
.btn {
background-color: $theme-color;
}
}-
variable-exists()只检查变量名是否存在，不关心值是否为空或 null - 若还需判断值是否“有效”（比如非
null、非空字符串），得叠加判断：@if variable-exists(theme-color) and $theme-color != null and $theme-color != '' - 注意：SCSS 中
null是字面量，不是字符串'null'，也不等于undefined（后者根本不可用）
@if嵌套太深导致可维护性差怎么办？
嵌套超过两层（即 @if 里面再套 @if）就该警惕。这不是语法限制，而是实际协作中容易出错：分支路径难追踪、新增条件易漏补、编译后 CSS 顺序也可能意外错乱。
- 优先把判断逻辑提前抽到变量里：
$is-mobile: $breakpoint == 'sm' or $breakpoint == 'xs'; @if $is-mobile { ... } - 多条件并列时，用
@else if比层层@if嵌套更清晰 - 极端情况（如主题 + 设备 + 用户权限三重组合），改用
@function封装判断逻辑，让@if只负责调用结果
为什么@if里的计算结果没生效？
最常见原因是作用域问题：在 @if 块内用 $var: value 声明的变量，默认是局部作用域，块外不可见。例如：
立即学习“前端免费学习笔记（深入）”；
@if $mode == 'compact' {
$padding: 4px;
}
.btn { padding: $padding; } // 报错：Undefined variable "$padding"- 如需跨作用域赋值，必须显式声明为全局：
$padding: 4px !global; - 更稳妥的做法是避免在条件块里赋值，改为用函数返回值：
@function get-padding($mode) { @return if($mode == 'compact', 4px, 12px); } - 还要注意：SCSS 的
if()函数（单行三元）和@if指令不是一回事，前者只能用于值计算，不能包裹选择器或嵌套规则
真正容易被忽略的是：SCSS 条件指令在编译期执行，所有判断都基于变量的静态值，无法响应运行时用户行为（比如点击切换主题）。这类交互逻辑必须交还给 CSS 自定义属性或 JS 控制。
