Sass .scss: Nesting e classi multiple?

Sto usando Sass (.scss) per il mio progetto attuale.

Esempio seguente:

HTML

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

SCSS

.container {
    background:red;
    color:white;

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

Funziona benissimo.

Posso gestire più classi mentre utilizzo gli stili nidificati.

Nell'esempio sopra sto parlando di questo:

CSS

.container.desc {
    background:blue;
}

In questo caso tutto div.containersarebbe normalmente redma div.container.descsarebbe blu.

Come posso nidificare questo dentro containercon Sass?

È possibile utilizzare il riferimento del selettore principale & , verrà sostituito dal selettore principale dopo la compilazione:

Per il tuo esempio:

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

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

Il &problema si risolverà completamente, quindi se il selettore genitore è nidificato stesso, l'annidamento verrà risolto prima di sostituire il file &.

Questa notazione viene spesso usata per scrivere pseudo-elementi e classi :

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

Tuttavia, puoi posizionare &praticamente qualsiasi posizione ti piaccia ^* , quindi è possibile anche quanto segue:

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

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

Tuttavia, tieni presente che questo in qualche modo rompe la tua struttura di nidificazione e quindi potrebbe aumentare lo sforzo di trovare una regola specifica nel tuo foglio di stile.

*: Non sono ammessi altri caratteri oltre agli spazi bianchi di fronte a &. Quindi non puoi fare una concatenazione diretta di selector+ &- #id&genererebbe un errore.

In tal caso, penso che sia necessario utilizzare un modo migliore per creare un nome di classe o una convenzione di nome di classe. Ad esempio, come hai detto, vuoi che la .containerclasse abbia un colore diverso in base a un uso o aspetto specifico. Puoi farlo:

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

Il codice sopra riportato si basa sulla metodologia BEM nelle convenzioni di denominazione delle classi. È possibile controllare questo collegamento: BEM - Metodologia di modifica degli elementi a blocchi

La risposta di Christoph è perfetta. A volte però potresti voler andare più classi di una. In questo caso è possibile provare le funzionalità @at-roote #{}css che consentirebbero a due classi root di sedersi una accanto all'altra utilizzando &.

Questo non funzionerebbe (a causa della nothing before &regola):

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

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

Ma questo (usando @at-root plus #{&}):

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

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