Flaga !optional w @extend w SASS

Podczas rozszerzania selektora można napotkać błąd, gdy dyrektywa @extend nie zadziałała poprawnie. Na przykład, jeśli masz następujący kod:

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

Jeśli żaden selektor nie będzie zawierał .main, to podczas kompilacji wystąpi błąd. W takim przypadku musimy połączyć sekwencje selektorów, do czego używamy dyrektywy @extend.

Ponadto, błąd wystąpi, jeśli selektor zawierający .main będzie taki: h1.main, co tłumaczy się konfliktem między a a h1.

Dlatego, w razie potrzeby, możesz zezwolić dyrektywie @extend na nie tworzenie nowych selektorów za pomocą flagi opcjonalności !optional, zapisanej po selektorze. Na przykład:

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