Использование Директивы @extend в CSS

Директива @extend в CSS предназначена для использования правил и отношений между селекторами. Она позволяет одному селектору наследовать стили другого, что придаёт больше гибкости и эффективности в процессе написания кода.

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

Предположим, у вас есть два селектора, .класс1 и .класс2. Оба из них имеют некоторые общие стили, но .класс2 также имеет несколько уникальных правил. Вместо дублирования этих общих стилей, вы можете использовать @extend, чтобы .класс2 мог наследовать стили у .класс1.

.класс1 {
  color: red;
  font-size: 18px;
}

.класс2 {
  @extend .класс1;
  background-color: yellow;
}

В этом примере, .класс2 наследует стили .класс1, то есть, он унаследует font-size и color. .класс2 также имеет свой уникальный стиль background-color.

Лучшие практики

• Используйте @extend вместе с классами или идентификаторами, но будьте осторожны с использованием этой директивы в некоторых случаях, так как это может привести к излишней вложенности и захламлению кода.
• Используйте его для создания общих групп стилей, которые можно легко переиспользовать.
• Не забывайте, что @extend может изменить порядок вашего CSS, поэтому надо всегда проверять результат его применения.

В заключении, директива @extend - это мощный инструмент, который может заметно упростить процесс написания CSS, но, как и всё, его следует использовать разумно и осторожно.