」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > SASS 選擇器中的「&」如何動態產生子選擇器?

SASS 選擇器中的「&」如何動態產生子選擇器?

發佈於2024-11-08
瀏覽:872

How does the ampersand (&) work in SASS selectors to dynamically generate child selectors?

SASS 選擇器中的與號(&)

SASS 選擇器中的與號(&)

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

對於 Sass 版本高達 3.2,以下語法是可接受的:

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

此外,也支援以下語法:

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

從 Sass 3.3 開始,以下語法有效:

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

最後,Sass 3.4 引進了另一種方法:

.foo { $foo: &; @at-root 欄#{&} { 顏色: 紅色; } }How does the ampersand (&) work in SASS selectors to dynamically generate child selectors?

透過利用這些技術,您可以動態產生包含部分父選擇器的子選擇器。這在建立可套用於不同父類別的 mixins 時特別有用。

最新教學 更多>

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3