Bagaimana untuk Memanjangkan Pemilih Induk dalam Campuran SASS Apabila Menggunakan Ampersand (&) pada Penghujung Pemilih?

Ampersand (&) dalam Pemilih SASS: Memperluas Skop Induk

Dalam SASS, simbol ampersand (&) berfungsi sebagai alat yang berkuasa untuk melanjutkan pemilih induk. Ia membolehkan anda menyusun peraturan dalam mixin dengan cara yang merangkumi nama kelas pemilih induk sendiri. Walau bagaimanapun, menggunakan ampersand pada penghujung pemilih memberikan cabaran yang unik.

Masalahnya terletak pada memastikan pemilih menyertakan nama kelas pemanggil. Pertimbangkan campuran Sass berikut:

<code class="sass">@mixin button-variant($color, $background, $border) {
    ...
    .foreverAlone {
        ...
    }

    .iThink .illNeverWork&amp; {
        color: $pinkUnicornRainbow;
        ...
    }
}</code>

Apabila campuran ini dipanggil dalam kelas CSS lain, kod yang dijana tidak akan termasuk nama kelas pemanggil. Sebaliknya, ia akan menghasilkan:

<code class="css">.foreverAlone {
    ...
}

.iThink .illNeverWork.callerClass {
    color: #123ABC;
    ...
}</code>

Untuk mengatasi isu ini, anda boleh menggunakan teknik berikut:

Sass Versi 3.2 dan Lebih Lama:

• Menggunakan berbilang pemilih: Pisahkan setiap pemilih dengan koma, pastikan ampersand (&) digunakan secara konsisten.

<code class="sass">@mixin button-variant($color, $background, $border) {
    ...
    .foreverAlone,
    .iThink &amp;.illNeverWork {
        color: $pinkUnicornRainbow;
        ...
    }
}</code>

Sass Versi 3.3:

• Sintaks bersempang: Gunakan sintaks bersempang untuk melanjutkan pemilih induk.

<code class="sass">@mixin button-variant($color, $background, $border) {
    ...
    .iThink &amp;-illNeverWork {
        color: $pinkUnicornRainbow;
        ...
    }
}</code>

Sass Versi 3.4:

• Peraturan at-root: Tentukan pembolehubah untuk menahan pemilih induk dan gunakan peraturan @at-root untuk melanjutkannya.

<code class="sass">@mixin button-variant($color, $background, $border) {
    ...
    $parent: &amp;;
    @at-root .iThink#{&amp;} {
        color: $pinkUnicornRainbow;
        ...
    }
}</code>

Dengan melaksanakan teknik ini, anda boleh melanjutkan pemilih induk dengan berkesan dalam campuran, memastikan kod yang dijana termasuk nama kelas pemanggil.

Atas ialah kandungan terperinci Bagaimana untuk Memanjangkan Pemilih Induk dalam Campuran SASS Apabila Menggunakan Ampersand (&) pada Penghujung Pemilih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!