Bagaimana Menggunakan Ampersand (&) dengan Betul dalam Pemilih SASS untuk Rujukan Pemilih Ibu Bapa?-tutorial css-php.cn

Bagaimana Menggunakan Ampersand (&) dengan Betul dalam Pemilih SASS untuk Rujukan Pemilih Ibu Bapa?

Patricia Arquette

Lepaskan： 2024-10-30 03:42:02

asal

1024 orang telah melayarinya

How to Correctly Use the Ampersand (&) in SASS Selectors for Parent Selector References?

Ampersand (&) dalam SASS: Menggunakannya di Hujung dan Dalam Pemilih

Pembangun sering menghadapi cabaran apabila menggunakan ampersand (&) aksara dalam pemilih SASS, terutamanya apabila ia muncul pada penghujung atau dalam pemilih. Siasatan ini menyelidiki isu khusus ini.

Campuran yang dibentangkan cuba memindahkan beberapa kod KURANG ke SASS. Walau bagaimanapun, disebabkan penggunaan & dalam pemilih yang salah, kod tersebut gagal menghasilkan output yang diingini.

Untuk memahami tujuan & watak, adalah penting untuk mengenali peranannya sebagai pemegang tempat untuk pemilih induk . Apabila digunakan dalam mixin atau blok, & mewakili pemilih atau kelas yang menggunakan mixin.

Dalam kes ini, gelagat yang dimaksudkan adalah untuk mixin menjana pemilih yang termasuk nama kelas elemen pemanggilan. Contohnya, jika mixin dipanggil di dalam

elemen, ia harus menghasilkan:

.callerClass .foreverAlone {
    ...
}

.callerClass .iThink .illNeverWork.callerClass {
    color: #123ABC;
    ...
}

Salin selepas log masuk

Walau bagaimanapun, kod yang disediakan tidak mencapai ini kerana peletakan & yang salah. Untuk menyelesaikan isu ini, & harus digunakan dengan sewajarnya untuk mewakili pemilih induk:

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

        .iThink &amp;.illNeverWork {

            color: #123ABC;
            ...
        }
  }

Salin selepas log masuk

Dengan pelaksanaan yang diperbetulkan ini, mixin akan menyediakan kelas pemanggil dengan betul kepada mana-mana pemilih bersarang yang dijana dalam mixin. Ingat, peletakan dan penggunaan & boleh memberi kesan ketara kepada output CSS yang terhasil, jadi penting untuk menggunakannya dengan tepat.

Atas ialah kandungan terperinci Bagaimana Menggunakan Ampersand (&) dengan Betul dalam Pemilih SASS untuk Rujukan Pemilih Ibu Bapa?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!