Sass .scss: Nesting dan beberapa kelas?


332

Saya menggunakan Sass (.scss) untuk proyek saya saat ini.

Contoh berikut:

HTML

<div class="container desc">
    <div class="hello">
        Hello World
    </div>
</div>

SCSS

.container {
    background:red;
    color:white;

    .hello {
        padding-left:50px;
    }
}

Ini sangat bagus.

Bisakah saya menangani beberapa kelas saat menggunakan gaya bersarang.

Dalam contoh di atas saya berbicara tentang ini:

CSS

.container.desc {
    background:blue;
}

Dalam hal ini semua div.containerbiasanya akan redtetapi div.container.descakan berwarna biru.

Bagaimana saya bisa bersarang di dalam ini containerdengan Sass?


1
Anda harus menggunakan pemilih kelas ganda. Masalah ini adalah contoh sempurna dari opsi bersarang di Sass. Anda dapat membaca semua tentang itu di sini kolosek.com/nesting-in-less-and-sass
Nesha Zoric

Jawaban:


570

Anda dapat menggunakan referensi pemilih induk & , itu akan diganti oleh pemilih induk setelah kompilasi:

Sebagai contoh Anda:

.container {
    background:red;
    &.desc{
       background:blue;
    }
}

/* compiles to: */
.container {
    background: red;
}
.container.desc {
    background: blue;
}

The &benar-benar akan menyelesaikan, jadi jika pemilih orang tua bersarang itu sendiri, bersarang akan diselesaikan sebelum mengganti &.

Notasi ini paling sering digunakan untuk menulis pseudo-elements dan -classes :

.element{
    &:hover{ ... }
    &:nth-child(1){ ... }
}

Namun, Anda dapat menempatkannya &di hampir semua posisi yang Anda suka * , jadi berikut ini dimungkinkan juga:

.container {
    background:red;
    #id &{
       background:blue;
    }
}

/* compiles to: */
.container {
    background: red;
}
#id .container {
    background: blue;
}

Namun perlu diperhatikan, bahwa ini entah bagaimana menghancurkan struktur sarang Anda dan karenanya dapat meningkatkan upaya menemukan aturan khusus di stylesheet Anda.

*: Tidak ada karakter selain spasi putih yang diizinkan di depan &. Jadi, Anda tidak dapat melakukan gabungan langsung selector+ &- #id&akan menimbulkan kesalahan.


12
Hanya sebagai catatan, penggunaan umum &adalah ketika menggunakan elemen semu dan kelas semu. Sebagai contoh: &:hover.
naksir

1
@ Crush Demi kelengkapan, saya menambahkan ini ke jawaban saya. Terima kasih atas komentarnya.
Christoph

1
Terima kasih. Saya pikir saya bodoh karena tidak disebutkan dalam panduan dasar! BTW, docs telah memindahkan URL ke: sass-lang.com/documentation/…
scipilot

1
Jika &digunakan di akhir baris, itu menempatkan garis itu di awal kelas di semua level lainnya. Anda dapat menggabungkan elemen dengan melakukan di &.descbawah .container, yang akan menambahkan .desc untuk itu, menghasilkan.container.desc
Kate Miller

scss-lint menyarankan untuk menggunakan "& :: hover" (double colones)
Marcel Lange

18

Jika itu masalahnya, saya pikir Anda perlu menggunakan cara yang lebih baik untuk membuat nama kelas atau konvensi nama kelas. Misalnya, seperti yang Anda katakan, Anda ingin .containerkelas memiliki warna yang berbeda sesuai dengan penggunaan atau penampilan tertentu. Kamu bisa melakukan ini:

SCSS

.container {
  background: red;

  &--desc {
    background: blue;
  }

  // or you can do a more specific name
  &--blue {
    background: blue;
  }

  &--red {
    background: red;
  }
}

CSS

.container {
  background: red;
}

.container--desc {
  background: blue;
}

.container--blue {
  background: blue;
}

.container--red {
  background: red;
}

Kode di atas didasarkan pada Metodologi BEM dalam konvensi penamaan kelas. Anda dapat memeriksa tautan ini: BEM - Metodologi Pengubah Elemen Blok


perhatikan ini terdengar bagus, tetapi harus dihindari di semua biaya. Anda akan berterima kasih kepada saya di masa mendatang ketika Anda akan mencoba mencari proyek Anda .container--descdan berakhir tanpa hasil.
Stavm

2

Jawaban Christoph sempurna. Namun terkadang Anda mungkin ingin naik lebih dari satu kelas. Dalam hal ini Anda bisa mencoba fitur @at-rootdan #{}css yang akan memungkinkan dua kelas root untuk duduk bersebelahan menggunakan &.

Ini tidak akan berfungsi (karena nothing before &aturan):

container {
    background:red;
    color:white;
    
    .desc& {
      background: blue;
    }

    .hello {
        padding-left:50px;
    }
}

Tapi ini akan (menggunakan @at-root plus #{&}):

container {
    background:red;
    color:white;
    
    @at-root .desc#{&} {
      background: blue;
    }

    .hello {
        padding-left:50px;
    }
}

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.