Direktiva !optional v @extend v SASS

Při rozšiřování selektoru můžete narazit na chybu, když direktiva @extend nefungovala správně. Například, pokud máte následující kód:

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

Pokud žádný selektor nebude obsahovat .main, při kompilaci dojde k chybě. V takovém případě potřebujeme sloučit sekvence selektorů, k čemuž použijeme direktivu @extend.

Kromě toho dojde k chybě, pokud selektor obsahující .main bude vypadat takto: h1.main, což se vysvětluje konfliktem mezi a a h1.

Proto v případě potřeby můžete povolit direktivě @extend nevytvářet nové selektory pomocí direktivy volitelnosti !optional, zapsané za selektorem. Například:

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