Метката !optional в @extend в SASS

При разширяване на селектор може да се получи грешка, когато директивата @extend не работи коректно. Например, ако имате следния код:

a.info {
	@extend .main;
}

Ако нито един селектор не съдържа .main, то при компилирането ще възникне грешка. В такъв случай трябва да комбинираме последователностите от селектори, за което използваме директивата @extend.

Освен това, ще има грешка, ако селекторът съдържащ .main е такъв: h1.main, което се обяснява с конфликт между a и h1.

Затова, при необходимост, можете да позволите на директивата @extend да не създава нови селектори чрез метката за незадължителност !optional, записана след селектора. Например:

a.info {
	@extend .main !optional;
}