Sass menggabungkan induk menggunakan ampersand (&) dengan pemilih tipe

Saya mengalami masalah saat bersarang di Sass. Katakanlah saya memiliki HTML berikut:

<p href="#" class="item">Text</p>
<p href="#" class="item">Text</p>
<a href="#" class="item">Link</a>

Ketika saya mencoba untuk menumpuk gaya saya berikut ini saya mendapatkan kesalahan kompilasi:

.item {
    color: black;
    a& {
        color:blue;
   }
}

Bagaimana cara mereferensikan pemilih tipe sebelum pemilih induk ketika itu adalah bagian dari elemen yang sama?

Seperti yang ditunjukkan Kumar , ini telah dimungkinkan sejak Sass 3.3.0.rc.1 (Maptastic Maple).

Arahan @ at-root menyebabkan satu atau beberapa aturan dipancarkan di root dokumen, daripada ditempatkan di bawah pemilih induknya.

Kita dapat menggabungkan @at-rootarahan bersama dengan interpolasi#{} untuk sampai pada hasil yang diinginkan.

KELANCANGAN

.item {
    color: black;
    @at-root {
        a#{&} {
            color:blue;
        }
    }
}

// Can also be written like this.
.item {
    color: black;
    @at-root a#{&} {
        color:blue;
    }
}

Output CSS

.item {
    color: black;
}
a.item {
    color: blue;
}

The @at-rootMetode -hanya tidak akan memecahkan masalah jika Anda berniat untuk memperpanjang pemilih terdekat sampai rantai. Sebagai contoh:

#id > .element {
    @at-root div#{&} {
        color: blue;
    }
}

Akan dikompilasi ke:

div#id > .element {
    color: blue;
}

Bagaimana jika Anda perlu menggabungkan tag Anda ke .elementalih-alih #id?

Ada fungsi di Sass yang disebut selector-unify()yang menyelesaikan ini. Menggunakan ini dengan @at-rootitu dimungkinkan untuk menargetkan .element.

#id > .element {
    @at-root #{selector-unify(&, div)} {
        color: blue;
    }
}

Akan dikompilasi ke:

#id > div.element {
    color: blue;
}

Sebagai permulaan, (pada saat menulis jawaban ini) tidak ada sintaks sass yang menggunakan selector & . Jika Anda akan melakukan sesuatu seperti itu, Anda memerlukan spasi antara pemilih dan simbol ampers. Sebagai contoh:

.item {
    .helper & {

    }
}

// compiles to:
.helper .item {

}

Cara lain untuk menggunakan ampersand mungkin adalah yang Anda (salah) cari:

.item {
    &.helper {

    }
}

// compiles to:
.item.helper {

}

Ini memungkinkan Anda untuk memperluas selektor dengan kelas lain, ID, pseudo-selektor, dll. Sayangnya untuk kasus Anda, ini secara teoritis akan dikompilasi ke sesuatu seperti .itema yang jelas tidak berfungsi.

Anda mungkin hanya ingin memikirkan kembali bagaimana Anda menulis CSS Anda. Apakah ada elemen induk yang dapat Anda gunakan?

<div class="item">
    <p>text</p>
    <p>text</p>
    <a href="#">a link</a>
</div>

Dengan cara ini, Anda dapat dengan mudah menulis SASS Anda dengan cara berikut:

.item {
    p {
        // paragraph styles here
    }
    a {
        // anchor styles here
    }
}

(Catatan tambahan: Anda harus melihat html Anda. Anda mencampur tanda kutip tunggal dan ganda DAN meletakkan atribut href pada tag p.)

AFAIK Jika Anda ingin menggabungkan ampersand untuk kelas dan tag pada saat yang sama, Anda perlu menggunakan sintaks ini:

.c1 {
  @at-root h1#{&},
    h2#{&}
    &.c2, {
    color: #aaa;
  }
}

akan dikompilasi ke

h1.c1,
h2.c1,
.c1.c2 {
  color: #aaa;
}

Kegunaan lain (seperti menggunakan kelas sebelumnya @at-rootatau menggunakan beberapa @at-root) akan menyebabkan kesalahan.

Semoga bermanfaat

Fitur ini telah hadir di versi terbaru Sass, 3.3.0.rc.1(Maptastic Maple)

Dua fitur terkait erat yang perlu Anda gunakan adalah scriptable &, yang dapat Anda interpolasi dalam gaya bertingkat untuk mereferensikan elemen induk, dan@at-root direktif, yang menempatkan selektor atau blok css berikut di root (tidak akan memiliki orang tua di css yang dikeluarkan)

Lihat masalah Github ini untuk lebih jelasnya