Bagaimanakah Saya Boleh Menggunakan Ampersand (&) Dengan Berkesan dalam Pemilih SASS?

Ampersand (&) dalam Pemilih SASS: Menguasai Penggunaan Akhir dan Sebarisnya

Watak ampersand (&) memainkan peranan yang penting dalam pemilih SASS, membolehkan anda merujuk pemilih induk dengan berkesan. Walau bagaimanapun, penggunaannya boleh menjadi rumit, terutamanya apabila ia muncul pada penghujung atau sebagai sebahagian daripada pemilih.

Masalah:

Pertimbangkan campuran berikut dalam SASS:

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

        .iThink .illNeverWork&amp; {

            color: $pinkUnicornRainbow;
            ...
        }
  }</code>

Apabila dipanggil dalam pelbagai kelas div, mixin ini gagal menjana CSS yang dimaksudkan. Daripada menghasilkan sesuatu seperti ini:

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

.callerClass .iThink .illNeverWork.callerClass{

    color: #123ABC;
    ...
}</code>

ia menghasilkan output yang salah.

Penyelesaian:

Untuk mencapai CSS yang dikehendaki, memahami nuansa penggunaan ampersand adalah penting. Dalam SASS versi 3.2 dan lebih lama, cara sah berikut boleh digunakan untuk merujuk kepada pemilih induk:

<code class="sass">.foo {
    &amp;, &amp;.bar, &amp;#bar, &amp;:after, &amp;[active] {
        color: red;
    }
}

.foo {
    .bar &amp; {
        color: red;
    }
}</code>

Dari Sass 3.3 dan seterusnya, sintaks dipermudahkan, membenarkan penggunaan seperti:

<code class="sass">.foo {
    &amp;bar, &amp;-bar {
        color: red;
    }
}</code>

Untuk Sass 3.4 dan lebih baru, pendekatan yang lebih berkuasa tersedia:

<code class="sass">.foo {
    $foo: &amp;;
    @at-root bar#{&amp;} {
        color: red;
    }
}</code>

Menggunakan teknik ini, anda boleh mengendalikan penggunaan ampersand dalam pemilih SASS dengan berkesan, membolehkan anda menjana CSS yang tepat dan boleh diselenggara output.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggunakan Ampersand (&) Dengan Berkesan dalam Pemilih SASS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!