SASS @mixin中&符号在#{if(&, "&", "")}语句中的作用解析

先看Bootstrap 5里form-validation-state-selector这个Mixin的核心简化代码：

@mixin form-validation-state-selector($state) {
  #{if(&, "&", "")}#{$state} {
    // 验证状态样式逻辑
  }
}

核心逻辑拆解 #

这里的#{if(&, "&", "")}是Sass插值语法+条件判断的组合，核心作用是根据Mixin的调用上下文动态拼接选择器：

• &是Sass的父选择器引用，只有当Mixin被嵌套在某个选择器内部调用时，&才会对应具体的父选择器值；如果是全局直接调用，&会返回null。
• if(&, "&", "")的逻辑很直接：如果存在父选择器上下文（&有值），就输出父选择器；如果没有，就输出空字符串。

两种典型使用场景 #

1. 嵌套在控件选择器内调用

比如给.form-control这类表单控件添加验证状态样式：

.form-control {
  @include form-validation-state-selector(.is-valid) {
    border-color: #198754;
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
  }
}

此时&指代父选择器.form-control，#{if(&, "&", "")}会输出.form-control，最终编译后的CSS为：

.form-control.is-valid {
  border-color: #198754;
  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

2. 全局直接调用

如果需要定义全局通用的验证状态样式（比如所有带.is-valid类的元素都生效）：

@include form-validation-state-selector(.is-valid) {
  color: #198754;
  background-color: rgba(25, 135, 84, 0.1);
}

此时没有父选择器上下文，&为null，#{if(&, "&", "")}输出空字符串，最终编译后的CSS为：

.is-valid {
  color: #198754;
  background-color: rgba(25, 135, 84, 0.1);
}

设计目的 #

这种写法让这个Mixin同时支持控件级局部验证样式和全局通用验证样式两种场景，不用额外编写两个功能重复的Mixin，大幅提升了代码的复用性和灵活性。

内容的提问来源于stack exchange，提问作者artu-hnrq