Sass .scss: Yuvalama ve çoklu sınıflar?

Mevcut projem için Sass (.scss) kullanıyorum.

Aşağıdaki örnek:

HTML

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

SCSS

.container {
    background:red;
    color:white;

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

Harika çalışıyor.

İç içe stilleri kullanırken birden fazla sınıfı işleyebilir miyim.

Yukarıdaki örnekte bunun hakkında konuşuyorum:

CSS

.container.desc {
    background:blue;
}

Bu durumda div.container, normal olarak her şey mavi olur redama div.container.descmavi olur.

Bunu containerSass ile nasıl iç içe yerleştirebilirim ?

Üst seçici referansını kullanabilirsiniz, &derlemeden sonra üst seçici ile değiştirilecektir:

Örneğiniz için:

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

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

&Tamamen böylece üst seçici kendisini iç içe edilirse, yuvalama değiştirmeden önce çözülecektir, çözecektir &.

Bu gösterim çoğunlukla sahte öğeler ve -sınıflar yazmak için kullanılır :

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

Ancak, &neredeyse istediğiniz herhangi bir konuma ^{* yerleştirebilirsiniz} , böylece aşağıdakiler de mümkündür:

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

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

Ancak, bunun bir şekilde yuvalama yapınızı bozduğunu ve böylece stil sayfanızda belirli bir kural bulma çabasını artırabileceğini unutmayın.

*: Beyaz karakterlerin önünde beyaz karakterden başka karakter kullanılmasına izin verilmez &. Böylece doğrudan bir selector+& - #id&bir hata atmak olacaktır.

Bu durumda, bir sınıf adı veya bir sınıf adı kuralı oluşturmak için daha iyi bir yol kullanmanız gerektiğini düşünüyorum. Örneğin, dediğin gibi, .containersınıfın belirli bir kullanıma veya görünüme göre farklı renklere sahip olmasını istersiniz . Bunu yapabilirsiniz:

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

Yukarıdaki kod, sınıf adlandırma kurallarında BEM Metodolojisine dayanmaktadır. Bu bağlantıyı kontrol edebilirsiniz: BEM - Blok Elemanı Değiştirici Metodolojisi

Christoph'un yanıtı mükemmel. Ancak bazen birden fazla sınıfa gitmek isteyebilirsiniz. Bu durumda, kullanarak iki kök sınıfın yan yana oturmasını sağlayan @at-rootve #{}css özelliklerini deneyebilirsiniz &.

Bu işe yaramaz ( nothing before &kural nedeniyle ):

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

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

Ama bu (kullanarak @at-root plus #{&}):

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

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