Расширение :extend

Расширение добавляет ваш селектор к уже существующему правилу. Миксин копирует объявления в каждое место вызова, а :extend записывает объявления один раз и перечисляет все селекторы через запятую. CSS получается короче, когда несколько классов выглядят одинаково.

Расширение правила

Опишите базовую кнопку и расширьте её в styles/components/buttons.less:

// styles/components/buttons.less
.btn {
  padding: 8px 16px;
  border-radius: 8px;
}
 
.btn-primary:extend(.btn) {
  color: white;
  background: #2563eb;
}

.btn,
.btn-primary {
  padding: 8px 16px;
  border-radius: 8px;
}
.btn-primary {
  color: white;
  background: #2563eb;
}

<style>
  .btn,
  .btn-primary {
    padding: 8px 16px;
    border-radius: 8px;
  }
  .btn-primary {
    color: white;
    background: #2563eb;
  }
</style>
 
<button class="btn-primary">Опубликовать</button>

Селектор .btn-primary добавился к правилу .btn, а свои объявления остались в отдельном правиле. В HTML достаточно одного класса.

Запись внутри правила

То же самое можно написать внутри правила через &:extend(). Так удобнее, когда расширяемых классов несколько:

// styles/components/buttons.less
.btn {
  padding: 8px 16px;
}
 
.rounded {
  border-radius: 8px;
}
 
.btn-danger {
  &:extend(.btn, .rounded);
  background: #dc2626;
}

.btn,
.btn-danger {
  padding: 8px 16px;
}
.rounded,
.btn-danger {
  border-radius: 8px;
}
.btn-danger {
  background: #dc2626;
}

Ключевое слово all

Без дополнительных слов :extend находит только точно такой же селектор. Чтобы захватить и производные правила, например .btn:hover, добавьте all:

// styles/components/buttons.less
.btn {
  background: #2563eb;
 
  &:hover {
    background: #1d4ed8;
  }
}
 
.link-button:extend(.btn all) {}

.btn,
.link-button {
  background: #2563eb;
}
.btn:hover,
.link-button:hover {
  background: #1d4ed8;
}

.link-button получил и обычный фон, и фон при наведении.

Расширение или миксин

	`:extend`	Миксин
Что попадает в CSS	Селектор добавляется к чужому правилу	Объявления копируются
Параметры	Нет	Есть
Размер CSS при многих вызовах	Почти не растёт	Растёт с каждым вызовом
Работает внутри `@media` с внешним правилом	Нет	Да

В Sass то же самое делает @extend, только записывается внутри правила.

Частая ошибка

:extend ищет селектор в итоговом CSS. Чистый миксин со скобками в CSS не попадает, поэтому расширять его бесполезно:

// styles/components/buttons.less
.flex-center() {
  display: flex;
  align-items: center;
}
 
.badge:extend(.flex-center) {
  width: 32px;
}

.badge {
  width: 32px;
}

Less выводит только предупреждение extend ' .flex-center' has no matches, а значок остаётся без центрирования. Для чистых миксинов используйте вызов .flex-center();, а :extend — для обычных классов.

Спасибо, что читаете!