La direttiva !optional in @extend in SASS

Quando si estende un selettore, si può incorrere in un errore se la direttiva @extend non funziona correttamente. Ad esempio, se si ha il seguente codice:

style.scssa.info {
  @extend .main;
}

Se nessun selettore contiene .main, si verificherà un errore durante la compilazione. In tal caso, è necessario unire le sequenze di selettori, per cui utilizziamo la direttiva @extend.

Inoltre, si verificherà un errore se il selettore che contiene .main sarà, ad esempio: h1.main, il che si spiega con un conflitto tra a e h1.

Pertanto, se necessario, è possibile permettete alla direttiva @extend di non creare nuovi selettori utilizzando la direttiva di opzionalità !optional, scritta dopo il selettore. Ad esempio:

style.scssa.info {
  @extend .main !optional;
}