В Sass директива @extend — это мощный инструмент, позволяющий совместно использовать стили между селекторами. Однако его необходимо использовать с %placeholder. В этой статье мы рассмотрим различные методы использования директивы @extend с примерами кода, которые помогут вам понять ее функциональность и рекомендации.

1. Базовый @extend с %placeholder:
   Самый простой способ использования директивы @extend — определить селектор %placeholder и расширить его внутри других селекторов. Этот метод гарантирует, что стили, определенные в %placeholder, наследуются расширенными селекторами. Вот пример:

%button {
  padding: 10px;
  background-color: blue;
  color: white;
}
.button-primary {
  @extend %button;
  font-weight: bold;
}
.button-secondary {
  @extend %button;
  opacity: 0.7;
}

2. Расширение нескольких селекторов.
   Вы можете расширить несколько селекторов с помощью директивы @extend, разделяя их запятыми. Этот метод полезен, когда вы хотите применить одни и те же стили к нескольким селекторам. Рассмотрим следующий пример:

%highlight {
  background-color: yellow;
}
.error-message {
  @extend %highlight;
  color: red;
}
.success-message {
  @extend %highlight;
  color: green;
}

3. Расширение вложенных селекторов.
   Директиву @extend можно также использовать для расширения вложенных селекторов. Этот подход полезен, если вы хотите наследовать стили от вложенного селектора. Вот пример:

%panel {
  padding: 10px;
  border: 1px solid gray;
  &-header {
    font-size: 20px;
  }
  &-body {
    font-size: 16px;
  }
}
.callout-panel {
  @extend %panel;
  background-color: yellow;
}

Директива @extend в Sass предоставляет удобный способ повторного использования стилей путем расширения селекторов %placeholder. Мы рассмотрели различные методы, включая базовое использование @extend, расширение нескольких селекторов и расширение вложенных селекторов. Используя эти методы, вы сможете писать более эффективный и удобный в сопровождении код Sass.

Не забывайте использовать @extend с осторожностью и избегать чрезмерного дублирования кода. Правильное использование @extend может привести к более чистым таблицам стилей и повышению производительности.

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