Sass .scss: Nesting dan beberapa kelas?

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?

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.

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

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