Bagaimanakah ampersand (&) berfungsi dalam pemilih SASS untuk menjana pemilih anak secara dinamik?

Ampersand (&) dalam Pemilih SASS

Dalam SASS, ampersand (&) mempunyai kepentingan istimewa apabila digunakan dalam pemilih. Seperti yang ditunjukkan dalam contoh campuran yang disediakan, ia boleh digunakan untuk menambahkan sebahagian daripada pemilih induk kepada pemilih anak.

Untuk versi Sass sehingga 3.2, sintaks berikut boleh diterima:

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

Selain itu, sintaks ini disokong:

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

Dari Sass 3.3 dan seterusnya, sintaks berikut adalah sah:

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

Akhir sekali, Sass 3.4 memperkenalkan pendekatan alternatif:

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

Dengan menggunakan teknik ini, anda boleh menjana pemilih anak secara dinamik yang merangkumi bahagian pemilih induk. Ini amat berguna apabila mencipta campuran yang boleh digunakan pada kelas induk yang berbeza.

Atas ialah kandungan terperinci Bagaimanakah ampersand (&) berfungsi dalam pemilih SASS untuk menjana pemilih anak secara dinamik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!