Метка !optional

Обычно, когда вы расширяете селектор, то получаете ошибку, если директива @extend не отработала. Например, если вы напишете a.important {@extend .notice}, то получите ошибку, если ни один селектор не будет содержать .notice. Также вы получите ошибку, если селектор содержащий в себе .notice будет таким: h1.notice. Ошибка происходит из-за конфликта между a и h1, и, исходя из данной ошибки, новый селектор не будет сгенерирован.

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

a.important {
  @extend .notice !optional;
}

a.important
  @extend .notice !optional