sass 的 @if 仅在编译时根据变量值决定是否输出样式，不能读取 css 自定义属性或响应运行时变化；需配合 sass 变量使用，注意真假值规则、类型比较及避免深层嵌套。
怎么用 @if 写带条件的样式规则
直接在 Sass 中写 @if，它只在编译时起作用，不是运行时 JS 那种判断。所以你不能拿它去响应用户点击或媒体查询变化——那是 CSS 媒体查询或 JS 的事。@if 本质是“根据变量值，在生成 CSS 前决定要不要输出某段样式”。
常见错误是把它当 JS 的 if 用，比如想根据 class 存在与否动态切样式，结果编译完压根没生成对应 CSS。
- 必须配合
$variable或函数返回值使用，比如$theme: 'dark' - 支持
@else if和@else，但嵌套别太深，超过三层就该拆成 mixin - 条件表达式里不能出现未定义变量，否则编译报错：
Undefined variable: "$color"
@if $size == 'large' {
font-size: 1.5rem;
} @else if $size == 'small' {
font-size: 0.875rem;
} @else {
font-size: 1rem;
}
@if 能否读取 CSS 自定义属性（--color）
不能。Sass 编译发生在浏览器加载 CSS 之前，而 --color 是运行时由浏览器解析的 CSS 变量。@if 看不到它，连 var(--color) 字符串都算作普通值，不会触发类型转换或求值。
典型误用场景：想根据 :root 里设置的 --mode: dark 来切主题色，结果 Sass 根本不识别这个值。
- 正确做法是把主题开关放在 Sass 变量里，比如
$mode: 'dark'，再用@if $mode == 'dark' - 如果必须 runtime 切换，得靠 CSS 原生逻辑（
@media (prefers-color-scheme: dark)）或 JS 注入类名 + 对应 CSS 规则 - 混用时注意命名冲突：Sass 变量
$primary和 CSS 变量--primary是两套体系，别指望它们自动同步
多个 @if 嵌套导致编译慢或输出混乱
深层嵌套本身不拖慢编译，但会让生成的 CSS 不可预测——尤其当条件依赖外部 mixin 参数，又没加默认分支时，容易漏掉某些组合路径，导致部分状态没样式。
更隐蔽的问题是调试困难：出错了只能看最终 CSS，找不到 Sass 源码里哪条 @if 分支被跳过了。
- 优先用
@each或 map 遍历替代多层@if，比如处理按钮状态：@each $state, $style in $button-states - 每个
@if块末尾加注释说明覆盖场景，例如// 当 $border-radius 为 null 时回退到默认圆角 - 避免在
@if里调用复杂函数，特别是递归或大量字符串操作，可能触发 Sass 解析器栈溢出
为什么 @if 判断布尔值老是失效
因为 Sass 的“真值”和 JS 不同：只有 null 和 false 是假值，空字符串 ''、数字 0、空列表 () 全部算真值。所以 @if $width == 0 和 @if $width 行为完全不同。
最常踩的坑是以为 @if $padding 能判断“有没有设置内边距”，结果 $padding: 0 还是进去了。
- 明确比较用
==或!=，别依赖隐式真假判断 - 检查变量类型是否符合预期，用
type-of($var)辅助调试 - 对可选参数做防御性判断，比如
@if not ($color == null)比@if $color更可靠
复杂点在于，Sass 没有“严格相等”概念，0px == 0 返回 true，但 '0px' == 0 就 false——类型混用时得手动转，比如用 unitless($val) 或 to-string($val)。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
