Sass的@if仅在编译期生效，无法实现运行时条件样式；动态主题切换须依赖CSS原生机制，如@media、CSS自定义属性+JS或类名切换。
Sass里根本没有@if指令能直接控制CSS输出条件
很多人搜“Sass if 判断”，其实是被误导了——Sass的@if只在编译期起作用，它不生成CSS条件逻辑，也不能响应浏览器运行时状态（比如用户偏好、设备尺寸、主题切换）。你写的@if $dark-mode { color: white; }，最终要么编译出color: white;，要么什么也不出，完全取决于变量值在编译那一刻是多少。
真正能动态切换样式的，只有CSS原生方案
想让样式随用户操作或系统设置实时变化，必须靠CSS自己的机制。Sass只是预处理器，它不参与运行时。
-
@media查询：响应视口宽度、横竖屏、分辨率等，例如@media (prefers-color-scheme: dark) - CSS自定义属性 + JavaScript：用JS切换
document.documentElement.style.setProperty('--theme', 'dark')，再在CSS里写color: var(--text-color); -
:is()/:where()+ 类名切换：比如给，然后写.theme-dark .btn { background: #333; }
Sass的@if只适合静态分支，比如主题打包
它真正有用的地方，是构建时根据配置生成不同版本的CSS文件，比如为内部系统和客户定制版分别输出两套样式包。
$brand: "internal";
@if $brand == "internal" {
.header { background: #0052cc; }
}
@else {
.header { background: #1a9e77; }
}
注意三点：
立即学习“前端免费学习笔记（深入）”；
- 所有
@if分支里的选择器、属性都必须能在编译时确定，不能依赖JS变量 - 嵌套过深容易让调试变困难——Sass报错位置常指向
@if行，而不是实际出问题的样式行 - 别试图用
@if模拟媒体查询，比如@if $breakpoint == "mobile"，这会让维护成本陡增，不如直接用@media
混合使用时最容易忽略的兼容性陷阱
当你把Sass变量注入到CSS自定义属性中，再配合JS切换，很容易踩坑：
- Sass不能直接读取
prefers-color-scheme，所以$dark-mode: prefers-color-scheme(dark)是非法的——必须用@media兜底 - 用
#{...}插值生成CSS变量值时，单位可能丢失，比如--gap: #{$base-gap}px;比--gap: #{$base-gap};更安全 - 旧版Sass（@use，而
@import会重复计算@if逻辑，导致变量覆盖不可控
最常被漏掉的一点：Sass编译结果里不会保留@if痕迹，一旦你忘了注释清楚哪个变量控制哪条分支，半年后自己都看不懂为什么某个按钮突然变色了。
