Метка !optional в @extend в SASS
При расширении селектора можно поймать
ошибку, когда директива @extend
не сработала корректно. К примеру,
если у вас есть следующий код:
a.info {
@extend .main;
}
Если ни один селектор не будет содержать .main,
то при компилировании произойдет ошибка.
В таком случае нам нужно объединить
последовательности селекторов,
для чего мы используем директиву @extend.
Помимо того, будет ошибка, если селектор
содержащий в себе .main будет таким:
h1.main, что объясняется конфликтом
между a и h1.
Поэтому, при необходимости, вы можете
разрешить директиве @extend не создавать
новых селекторов при помощи метки необязательности
!optional, записанной после селектора. Например:
a.info {
@extend .main !optional;
}