SASS 选择器中的“&”如何动态生成子选择器？

SASS 选择器中的与号 (&)

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

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

.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 时特别有用。

以上是SASS 选择器中的“&”如何动态生成子选择器？的详细内容。更多信息请关注PHP中文网其他相关文章！