!optional-mærket i @extend i SASS

Ved udvidelse af en selector kan man få en fejl, når direktivet @extend ikke fungerede korrekt. For eksempel, hvis du har følgende kode:

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

Hvis ingen selector indeholder .main, så vil der opstå en fejl under kompilering. I så et tilfælde er vi nødt til at kombinere selector-sekvenser, hvilket vi bruger direktivet @extend til.

Derudover vil der opstå en fejl, hvis selectoren der indeholder .main er sådan: h1.main, hvilket forklares med en konflikt mellem a og h1.

Derfor kan du, hvis nødvendigt, tillade direktivet @extend at undlade at oprette nye selectorer ved hjælp af valgfrihedsmærket !optional, skrevet efter selectoren. For eksempel:

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