Direktíva !optional v @extend v SASS

Pri rozširovaní selektora môžete chytiť chybu, keď direktíva @extend nefungovala správne. Napríklad, ak máte nasledujúci kód:

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

Ak žiadny selektor nebude obsahovať .main, počas kompilácie nastane chyba. V takom prípade potrebujeme spojiť sekvencie selektorov, na čo použijeme direktívu @extend.

Okrem toho, nastane chyba, ak selektor obsahujúci .main bude taký: h1.main, čo sa vysvetľuje konfliktom medzi a a h1.

Preto, v prípade potreby, môžete povoliť direktíve @extend nevytvárať nové selektory pomocou direktívy voliteľnosti !optional, zapísanej za selektor. Napríklad:

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