Rumah > Artikel > hujung hadapan web > 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!