SASS 选择器中的与号 (&)

在 SASS 中，与号 (&) 在选择器中使用时具有特殊意义。正如提供的 mixin 示例所示，它可以用于将父选择器的一部分附加到子选择器。

对于 Sass 版本高达 3.2，以下语法是可接受的：

.foo {
    &, &.bar, &#bar, &:after, &[active] {
        color: red;
    }
}

此外，还支持以下语法：

.foo {
    .bar & {
        color: red;
    }
}

从 Sass 3.3 开始，以下语法有效：

.foo {
    &bar, &-bar {
        color: red;
    }
}

最后，Sass 3.4 引入了另一种方法：

.foo {
    $foo: &;
    @at-root bar#{&} {
        color: red;
    }
}

通过利用这些技术，您可以动态生成包含部分父选择器的子选择器。这在创建可应用于不同父类的 mixins 时特别有用。