@extend

<div class="error error--serious">
  Oh no! You've been hacked!
</div>

.error {
  border: 1px #f00;
  background-color: #fdd;
}

.error--serious {
  border-width: 3px;
}

Правило Sass @extend решает эту проблему. Он написан @extend <selector> и сообщает Sass, что один селектор должен наследовать стили другого.

.error {
  border: 1px #f00;
  background-color: #fdd;

  &--serious {
    @extend .error;
    border-width: 3px;
  }
}

.error
  border: 1px #f00
  background-color: #fdd

  &--serious
    @extend .error
    border-width: 3px

.error, .error--serious {
  border: 1px #f00;
  background-color: #fdd;
}
.error--serious {
  border-width: 3px;
}

Когда один класс расширяет другой, Sass стилизует все элементы, которые соответствуют расширителю, как если бы они также соответствовали расширяемому классу. Когда один селектор класса расширяет другой, он работает точно так же, как если бы вы добавили расширенный класс к каждому элементу в вашем HTML, который уже имел расширяющийся класс. Вы можете просто написать class="error--serious", и Sass позаботится о том, чтобы он был оформлен так, как если бы он также имел class="error".

Конечно, селекторы используются не только сами по себе в правилах стиля. Sass знает, что нужно расширять везде, где используется селектор. Это гарантирует, что ваши элементы будут стилизованы точно так, как если бы они соответствовали расширенному селектору.

.error:hover {
  background-color: #fee;
}

.error--serious {
  @extend .error;
  border-width: 3px;
}

.error:hover
  background-color: #fee


.error--serious
  @extend .error
  border-width: 3px

.error:hover, .error--serious:hover {
  background-color: #fee;
}

.error--serious {
  border-width: 3px;
}

Как это работает permalinkКак это работает

В отличие от миксин, которые копируют стили в текущее правило стиля, @extend обновляет правила стиля, содержащие расширенный селектор, так что они также содержат расширяющий селектор. При расширении селекторов Sass выполняет интеллектуальную унификацию:

• Он никогда не генерирует селекторы вроде #main#footer, которые не могут соответствовать никаким элементам.

• Это гарантирует, что сложные селекторы чередуются, так что они работают независимо от того, в каком порядке вложены элементы HTML.

• Он максимально сокращает избыточные селекторы, при этом гарантируя, что специфичность больше или равна специфичности расширителя.

• Он знает, когда один селектор совпадает со всем, что делает другой, и может комбинировать их вместе.

• Он разумно обрабатывает комбинаторы, универсальные селекторы и псевдоклассы, содержащие селекторы.

.content nav.sidebar {
  @extend .info;
}

// Это не будет расширено, потому что `p` несовместимо с `nav`.
p.info {
  background-color: #dee9fc;
}

// Невозможно узнать, будет ли `<div class="guide">` внутри или снаружи
// `<div class="content">`, поэтому Sass генерирует оба, чтобы быть в безопасности.
.guide .info {
  border: 1px solid rgba(#000, 0.8);
  border-radius: 2px;
}

// Sass знает, что каждый элемент, соответствующий "main.content", также соответствует
// ".content" и избегает создания ненужных чередующихся селекторов.
main.content .info {
  font-size: 0.8em;
}

.content nav.sidebar
  @extend .info


// Это не будет расширено, потому что `p` несовместимо с `nav`.
p.info
  background-color: #dee9fc


// Невозможно узнать, будет ли `<div class="guide">` внутри или снаружи
// `<div class="content">`, поэтому Sass генерирует оба, чтобы быть в безопасности.
.guide .info
  border: 1px solid rgba(#000, 0.8)
  border-radius: 2px


// Sass знает, что каждый элемент, соответствующий "main.content", также соответствует
// ".content" и избегает создания ненужных чередующихся селекторов.
main.content .info
  font-size: 0.8em

p.info {
  background-color: #dee9fc;
}

.guide .info, .guide .content nav.sidebar, .content .guide nav.sidebar {
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-radius: 2px;
}

main.content .info, main.content nav.sidebar {
  font-size: 0.8em;
}

Селекторы заполнителей permalinkСелекторы заполнителей

Иногда вы хотите написать правило стиля, которое только предназначено для расширения. В этом случае вы можете использовать селекторы-заполнители, которые выглядят как селекторы классов, начинающиеся с % вместо .. Любые селекторы, которые включают заполнители, не включаются в вывод CSS, но расширяют их.

.alert:hover, %strong-alert {
  font-weight: bold;
}

%strong-alert:hover {
  color: red;
}

.alert:hover, %strong-alert
  font-weight: bold


%strong-alert:hover 
  color: red

.alert:hover {
  font-weight: bold;
}

Частные заполнители permalinkЧастные заполнители

Как и участники модуля, селектор-заполнитель можно пометить как частный, начав его имя с - или _. Селектор частного заполнителя может быть расширен только внутри таблицы стилей, которая его определяет. Для любых других таблиц стилей это будет выглядеть так, как будто этого селектора не существует.

Область расширения permalinkОбласть расширения

Когда одна таблица стилей расширяет селектор, это расширение будет влиять только на правила стиля, написанные в восходящих модулях, то есть на модули, которые загружаются этой таблицей стилей с помощью правила @use или правилоа @forward, модули, загруженные этими модулями, и так далее. Это помогает сделать ваши правила @extend более предсказуемыми, гарантируя, что они влияют только на стили, о которых вы знали, когда их писали.

Обязательные и необязательные расширения permalinkОбязательные и необязательные расширения

Обычно, если @extend не соответствует ни одному селектору в таблице стилей, Sass выдаст ошибку. Это помогает защитить от опечаток или переименования селектора без переименования селекторов, которые от него наследуются. Расширения, требующие наличия расширенного селектора, являются обязательными.

Однако это не всегда может быть тем, что вам нужно. Если вы хотите, чтобы @extend не выполнял никаких действий, если расширенный селектор не существует, просто добавьте в конец !optional.

Расширения или Миксины? permalinkРасширения или Миксины?

Расширения и примеси - это способы инкапсуляции и повторного использования стилей в Sass, что, естественно, поднимает вопрос о том, когда какой из них использовать. Миксины, очевидно, необходимы, когда вам нужно настроить стили с помощью аргументов, но что, если они всего лишь фрагменты стилей?

Как показывает опыт, расширения - лучший вариант, когда вы выражаете отношения между семантическими классами (или другими семантическими селекторами). Поскольку элемент с классом .error--serious является ошибкой, для него имеет смысл расширить .error. Но для несемантических коллекций стилей написание миксина может избежать каскадных головных болей и упростить настройку в дальнейшем.

Ограничения permalinkОграничения

Запрещенные селекторы permalinkЗапрещенные селекторы

Совместимость (No Compound Extensions):

Dart Sass

✓

LibSass

✗

Ruby Sass

✗

▶

Только простые селекторы - отдельные селекторы, такие как .info или a могут быть расширены. Если бы .message.info мог быть расширен, определение @extend говорит, что элементы, соответствующие расширителю, будут иметь такой стиль, как если бы они соответствовали .message.info. Это то же самое, что и сопоставление .message и .info, поэтому писать это вместо @extend .message, .info не принесет никакой пользы.

Точно так же, если бы .main .info можно было расширить, он бы делал (почти) то же самое, что и расширение .info самостоятельно. Тонкие различия не стоят того, чтобы выглядеть так, будто он делает что-то существенно другое, так что это тоже недопустимо.

.alert {
  @extend .message.info;
  //      ^^^^^^^^^^^^^
  // Error: Write @extend .message, .info instead.

  @extend .main .info;
  //      ^^^^^^^^^^^
  // Error: write @extend .info instead.
}

.alert
  @extend .message.info
  //      ^^^^^^^^^^^^^
  // Error: Write @extend .message, .info instead.

  @extend .main .info
  //      ^^^^^^^^^^^
  // Error: write @extend .info instead.

HTML-эвристика permalinkHTML-эвристика

Когда @extend чередует сложные селекторы, он не генерирует все возможные комбинации селекторов предков. Многие из селекторов, которые он мог бы сгенерировать, вряд ли действительно будут соответствовать реальному HTML, и создание их всех сделало бы таблицы стилей слишком большими для очень небольшой реальной ценности. Вместо этого он использует эвристику: он предполагает, что предки каждого селектора будут самодостаточными, без чередования с предками других селекторов.

header .warning li {
  font-weight: bold;
}

aside .notice dd {
  // Sass не генерирует CSS для соответствия <dd> в
  //
  // <header>
  //   <aside>
  //     <div class="warning">
  //       <div class="notice">
  //         <dd>...</dd>
  //       </div>
  //     </div>
  //   </aside>
  // </header>
  //
  // потому что сопоставление всех таких элементов потребовало бы,
  // чтобы мы сгенерировали девять новых селекторов вместо двух.
  @extend li;
}

header .warning li
  font-weight: bold


aside .notice dd
  // Sass не генерирует CSS для соответствия <dd> в
  //
  // <header>
  //   <aside>
  //     <div class="warning">
  //       <div class="notice">
  //         <dd>...</dd>
  //       </div>
  //     </div>
  //   </aside>
  // </header>
  //
  // потому что сопоставление всех таких элементов потребовало бы,
  // чтобы мы сгенерировали девять новых селекторов вместо двух.
  @extend li

header .warning li, header .warning aside .notice dd, aside .notice header .warning dd {
  font-weight: bold;
}

Расширить в @media permalinkРасширить в @media

Хотя @extend разрешен в @media и других at-правилах CSS, не разрешено расширять селекторы, которые появляются вне его at-правила. Это связано с тем, что расширяемый селектор применяется только в пределах данного медиа-контекста, и нет способа убедиться, что ограничение сохраняется в сгенерированном селекторе без дублирования всего правила стиля.

@media screen and (max-width: 600px) {
  .error--serious {
    @extend .error;
    //      ^^^^^^
    // Error: ".error" was extended in @media, but used outside it.
  }
}

.error {
  border: 1px #f00;
  background-color: #fdd;
}

@media screen and (max-width: 600px)
  .error--serious
    @extend .error
    //      ^^^^^^
    // Error: ".error" was extended in @media, but used outside it.



.error
  border: 1px #f00
  background-color: #fdd