Селекторы расширения

Иногда вы будете писать стили для класса, который вы хотите использовать только с директивой @extend и не хотите использовать непосредственно в HTML. Это особенно важно при написании Sass библиотеки, где вы можете передавать стили пользователям через @extend, если им это нужно, и игнорировать, если нет.

Если вы используете для этого обычные классы, то в конце концов вы можете столкнуться с тем, что у вас таблица стилей намного больше, чем могло бы быть и даже конфликты с другими классами, которые используются в HTML. Вот почему Sass поддерживает шаблонные селекторы(например, %foo).

Шаблонные селекторы выглядят так же, как и селекторы классов или идентификаторов, только . или # заменены на %. Они могут быть использованы в любом месте, где могут находиться классы или идентификаторы, и сами по себе они не дают набора правил в генерируемом CSS файле. Например:

// Данный набор правил не будет сгенерирован
#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

// Данный набор правил не будет сгенерирован
#context a%extreme
  color: blue
  font-weight: bold
  font-size: 2em

Тем не менее, шаблонные селекторы могут быть расширены, также как классы или идентификаторы. Расширенные селекторы будут сгенерированы, а базовый шаблонный селектор - нет. Например:

.notice {
  @extend %extreme;
}

.notice
  @extend %extreme

#context a.notice {
  color: blue;
  font-weight: bold;
  font-size: 2em; 
}