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

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;
    ...
}

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 &.illNeverWork {

            color: #123ABC;
            ...
        }
  }

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!

css less sass if for include using class this issue

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn