Ampersand (&)作为SASS @mixin中的变量

Question

查找引导程序5代码时，我在bootstrap/scss/mixins/_forms.scss文件上看到以下声明：

@mixin form-validation-state-selector($state) {
  @if ($state == "valid" or $state == "invalid") {
    .was-validated #{if(&, "&", "")}:#{$state},
    #{if(&, "&", "")}.is-#{$state} {
      @content;
    }
  } @else {
    #{if(&, "&", "")}.is-#{$state} {
      @content;
    }
  }
}

无法准确理解&变量在#{if(&, "&", "")}语句中的用法。它是怎么工作的？

我知道在写缩进层次结构时，使用)性格 ( os SASS )来包含父选择器。但我猜不出它是如何在@mixin内部的上述语句上使用的，当引用出来时，"。有人能解释一下吗？

提前感谢！

Answer 1

他们使用内插作为带有#{if(&, "&", "")}:#{$state}逻辑的选择器的一部分。

if()函数的工作方式类似于if(val, res1, res2)，如果val为true，则使用res1，否则使用res2，类似于三元。因此，如果&是真实的，例如父选择器存在，那么它将使用"&“生成.was-validated &:valid,，否则将是使用空字符串的.was-validated :valid。

下面是一个CodePen演示，它演示了#{if(&, "&", ""}的用法。

Answer 2

这种语法的原因是，这是与dartsass的某种解析/兼容性问题。这些年来，SASS有很多不同的CLI工具来生成代码，在谈到错误时，也有不同程度的严格性。

看来这是为了防止一个问题。也就是说，您不应该在根级别使用& (在编译时没有根根--可能是NullPointer或其他什么)，因为这将产生下面屏幕快照中看到的错误：

​

​

原因可以在您链接的代码上面的注释中找到：https://github.com/sass/sass/issues/1873#issuecomment-152293725

添加规则后，错误将消失：

​

​

使用的解析器：https://www.sassmeister.com/