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中文網其他相關文章！