Cara Menggunakan Ampersand (&) dalam Pemilih SASS: Menyelesaikan Cabaran Bersarang dengan Campuran

Ampersand (&) dalam Pemilih SASS: Penggunaan dan Penyelesaian

SASS, bahasa prapemprosesan untuk CSS, menggunakan simbol ampersand (&) untuk mewakili pemilih induk, membenarkan kod yang boleh digunakan semula dan boleh diselenggara. Walau bagaimanapun, menggunakan ampersand pada penghujung atau sebagai sebahagian daripada pemilih boleh menimbulkan cabaran.

Gambaran Keseluruhan Masalah

Campuran yang bertujuan untuk meniru gelagat KURANG mempunyai pemilih dengan ampersand (&) pada penghujungnya, menyebabkan output tidak betul. Hasil yang diingini adalah untuk menjana set pemilih bersarang di mana kelas pemanggil ditambahkan pada setiap tahap berikutnya, seperti yang ditunjukkan di bawah:

.callerClass .foreverAlone{
    ...
} 

.callerClass .iThink .illNeverWork.callerClass{

    color: $pinkUnicornRainbow;
    ...
}

Penyelesaian

Untuk Sass versi 3.2 dan ke bawah, cara yang sah untuk menggunakan pemilih induk termasuk:

&, &.bar, &#bar, &:after, &[active]

Dalam Sass 3.3, sintaks berikut ditambah:

&bar, &-bar

Sass 3.4 memperkenalkan ciri baharu di mana ampersand boleh diberikan kepada pembolehubah dan digunakan dalam peraturan @at-root:

$foo: &;

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

Application to Problem

Untuk menangani mixin yang diberikan, ampersand hendaklah digunakan bersama dengan kelas pemanggil seperti berikut:

@mixin button-variant($color, $background, $border)
{
    ...
    .callerClass&.foreverAlone{
        ...
    }

    .callerClass&.iThink .illNeverWork.callerClass& {

        color: $pinkUnicornRainbow;
        ...
    }
}

Atas ialah kandungan terperinci Cara Menggunakan Ampersand (&) dalam Pemilih SASS: Menyelesaikan Cabaran Bersarang dengan Campuran. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!