Sass 的 @if/@else 是编译时逻辑，仅在构建时根据变量值生成静态 CSS，无法响应用户交互或运行时状态；需用 CSS 自定义属性+JS 实现动态主题切换。
怎么用 Sass 的 @if 和 @else 控制样式生成
直接说结论：Sass 的 @if/@else 是编译时逻辑，不是运行时响应式控制——它只在你跑 sass 命令或构建时起作用，生成的是静态 CSS，和 JS 的条件渲染完全不是一回事。
常见误解是以为写个 @if $dark-mode { ... } 就能自动切主题，其实它只是根据变量值决定“这次编译要不要把暗色样式写进最终 CSS 文件里”。
实操建议：
- 把真正需要动态切换的逻辑（比如用户点按钮切主题）留给 CSS 自定义属性（
--bg-color）+ JS 控制 class 或 style，Sass 只负责预设好几套样式块 -
@if适合处理构建配置差异：比如是否启用动画、是否兼容 IE、用 rem 还是 px 做单位 - 别在
@if里引用 DOM 状态或用户行为——它看不到页面，也等不到点击
Sass @if 的参数怎么写才不报错
错误现象很典型：Invalid CSS after "...": expected expression，多半是因为条件表达式写成了运行时语法。
立即学习“前端免费学习笔记（深入）”；
Sass 的 @if 只认变量、函数返回值、字面量，不认属性名、选择器或未定义符号。
实操建议：
- 必须用
$开头的变量，比如@if $enable-hover { ... }，不能写@if enable-hover { ... } - 比较字符串要用引号，
@if $theme == "dark"，不是@if $theme == dark（后者会被当变量名，报 undefined） - 支持
and/or/not，但括号要配对：@if ($size == "lg") and ($border)，少括号容易解析失败 - 用
@debug查变量值（如@debug $font-size;），比猜强得多
为什么 @if 生成的 CSS 没生效？
最常踩的坑：你以为条件满足了，其实变量压根没传进来，或者被后面同名变量覆盖了。
Sass 变量作用域是“文件内就近原则”，@import 的顺序、!default 的位置、是否用了 @use 都会影响实际值。
实操建议：
- 在
@if前加@debug $var-name;，确认它确实是你要的值和类型（比如numbervsstring） - 避免在多个文件里反复声明同名变量；用
@use "config" as *;时，优先用命名空间调用config.$breakpoint - 如果变量来自外部（如构建工具注入），确保它走的是
--load-path或additionalData方式，而不是靠 CSS 自定义属性“骗”进 Sass - 注意
!default只在变量未定义时生效，已赋值的变量不会被覆盖——这跟 JS 的默认参数逻辑不一样
替代方案：什么情况下不该用 @if？
当你需要根据屏幕尺寸、用户偏好、元素状态实时变样式时，@if 就是错工具。
它的本质是 CSS 生成逻辑的开关，不是样式响应机制。真要动态，得靠原生能力。
实操建议：
- 媒体查询用
@media，不是@if $screen == "mobile"——后者只能生成固定一套断点 CSS - 暗色模式检测用
@media (prefers-color-scheme: dark)，不是 Sass 变量判断 - 组件状态（如
.btn--loading）用 class 切换 + CSS 规则，别试图用@if $state == "loading"生成不同类名 - 需要运行时计算？上 CSS 自定义属性 +
calc()，或者干脆交给 JS
复杂点在于：很多人想用 Sass 解决本该由运行时处理的问题，结果调试半天发现逻辑根本没机会执行——因为 Sass 早就在打包时睡着了。
