A !optional jelölés @extend-ben SASS-ban

A szelektor kiterjesztésekor előfordulhat hibakezelés, amikor a @extend direktíva nem működik megfelelően. Például, ha a következő kódod van:

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

Ha egyetlen szelektor sem tartalmaz .main-t, akkor a fordítás során hiba történik. Ilyen esetben a szelektor sorozatokat kell összevonni, amihez a @extend direktívát használjuk.

Ezen kívül hiba fog történni, ha a szelektor, amely tartalmazza a .main-t, ilyen lesz: h1.main, ami a a és a h1 közötti konfliktussal magyarázható.

Ezért, ha szükséges, megadhatod a @extend direktívának, hogy ne hozzon létre új szelektorokat a kötelezőtlenségi jelölés !optional segítségével, a szelektor után írva. Például:

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