Sass不支持在选择器位置直接使用@if语法；@if只能作用于样式声明块内部或生成选择器字符串，必须包裹完整规则（含选择器和声明），编译后仅输出满足条件的静态CSS。
Sass里没有if-else选择器语法
直接说结论：Sass本身不支持在选择器位置写 @if 或类似条件判断，比如不能写 .btn {@if $variant == 'primary' { color: blue; }} —— 这种写法会报错：SyntaxError: Invalid CSS after "..."。Sass的控制指令（@if、@each 等）只能作用于样式声明块内部，或用于生成选择器字符串，但不能“动态切换选择器本身”的匹配逻辑。
用@if + 嵌套规则生成不同选择器
真正可行的做法是把条件判断放在规则外层，根据变量值生成整套规则块。例如按主题切换按钮样式：
$theme: 'dark';
@if $theme == 'dark' {
.btn {
background-color: #333;
color: #fff;
}
}
@else {
.btn {
background-color: #f0f0f0;
color: #333;
}
}
注意点：
-
@if必须包裹完整规则（含选择器和声明），不能只包声明 - 变量必须在
@if前已定义，且作用域可见（推荐用!default声明默认值） - 编译后只会输出满足条件的那一组 CSS，不会残留未命中分支
用@mixin + 参数模拟“条件选择器”行为
更灵活的方式是封装成混合宏，把选择器和条件逻辑一起抽象：
立即学习“前端免费学习笔记（深入）”；
@mixin btn-variant($color) {
@if $color == primary {
background-color: #007bff;
} @else if $color == danger {
background-color: #dc3545;
} @else {
background-color: #6c757d;
}
}
.btn-primary { @include btn-variant(primary); }
.btn-danger { @include btn-variant(danger); }
这种写法实际是“为不同选择器调用同一套条件逻辑”，不是在单个选择器内做判断。常见误用是试图在 @include 内部生成选择器（如 { .foo { ... } }），这会导致嵌套错误或无效输出。
避免混淆：CSS原生伪类 ≠ Sass条件逻辑
有人会把 :hover、:disabled 这类伪类当成“CSS里的条件判断”，但它们是运行时浏览器匹配的，和 Sass 编译期的 @if 完全无关。Sass 无法基于元素是否 hover 来改变生成的 CSS 结构 —— 它只能在编译时决定“要不要生成 .btn:hover 这条规则”。真正需要运行时条件样式，得靠 JS 控制 class 或使用 CSS 自定义属性 + calc() 等间接方式。
最常被忽略的一点：Sass 的所有条件都是静态的，编译完就固定了。所谓“动态选择器”，本质只是提前写好多个分支，再靠变量选一个。别指望它能响应 DOM 状态变化。
