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

При расширении селектора можно поймать ошибку, когда директива @extend не сработала корректно. К примеру, если у вас есть следующий код:

a.info {
	@extend .main;
}

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

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

Поэтому, при необходимости, вы можете разрешить директиве @extend не создавать новых селекторов при помощи метки необязательности !optional, записанной после селектора. Например:

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