SCSS Плейсхолдерные Селекторы (%placeholder)

Плейсхолдерные селекторы в SCSS - это мощная концепция, позволяющая определять наборы стилей, которые не выводятся непосредственно в скомпилированный CSS. Вместо этого они предназначены для расширения (через директиву @extend) другими селекторами. Это помогает избежать создания в CSS базовых классов, которые могут не использоваться напрямую в HTML, делая ваш код чище и эффективнее.

Определение плейсхолдерного селектора

Имя плейсхолдерного селектора начинается с символа процента %, за которым следует любое допустимое имя селектора.

Синтаксис:

%placeholder-name {
  property: value;
  property: value;
  // ... другие стили
}

Пример:

%button-base {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

В этом примере %button-base определяет набор базовых стилей для кнопок, но сам по себе не будет скомпилирован в CSS.

Расширение плейсхолдерного селектора (@extend)

Чтобы применить стили, определенные в плейсхолдерном селекторе, к обычному селектору, используется директива @extend.

Синтаксис:

.selector {
  @extend %placeholder-name;
  // Дополнительные стили для .selector
}

Пример (продолжение предыдущего):

%button-base {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

.button-primary {
  @extend %button-base;
  background-color: green;
}

.button-secondary {
  @extend %button-base;
  background-color: gray;
  color: black;
}

При компиляции этого SCSS в CSS вы получите:

.button-primary, .button-secondary {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

.button-primary {
  background-color: green;
}

.button-secondary {
  background-color: gray;
  color: black;
}

Как видите, стили из %button-base были применены к .button-primary и .button-secondary, а сам плейсхолдер %button-base не был выведен в CSS как отдельный класс.

Преимущества использования плейсхолдерных селекторов

• Избежание ненужных классов в HTML: Вы определяете стили, которые предназначены только для наследования, и вам не нужно добавлять дополнительные классы в вашу HTML-разметку только для применения этих базовых стилей.
• Чистый и организованный CSS: Ваш скомпилированный CSS содержит только те классы, которые действительно используются в вашей HTML-структуре.
• Переиспользование стилей: Легко переиспользовать наборы стилей в разных компонентах или элементах.
• Улучшенная поддержка: Изменения в плейсхолдерном селекторе автоматически применяются ко всем селекторам, которые его расширяют.

Использование вложенных плейсхолдерных селекторов

Плейсхолдерные селекторы могут быть вложены друг в друга, а также в обычные селекторы.

Пример:

.container {
  %shared-heading {
    font-weight: bold;
    margin-bottom: 1em;
  }

  .article-title {
    @extend %shared-heading;
    font-size: 2em;
  }

  .section-title {
    @extend %shared-heading;
    font-size: 1.5em;
    color: navy;
  }
}

Компилируется в:

.container .article-title, .container .section-title {
  font-weight: bold;
  margin-bottom: 1em;
}

.container .article-title {
  font-size: 2em;
}

.container .section-title {
  font-size: 1.5em;
  color: navy;
}

Расширение нескольких плейсхолдерных селекторов

Один селектор может расширять несколько плейсхолдерных селекторов одновременно.

Пример:

%base-styles {
  padding: 10px;
  border: 1px solid #ccc;
}

%rounded-corners {
  border-radius: 5px;
}

.alert-box {
  @extend %base-styles;
  @extend %rounded-corners;
  background-color: lightyellow;
  color: black;
}

Компилируется в:

.alert-box {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: lightyellow;
  color: black;
}

Отличия от обычных классов

Основное отличие плейсхолдерных селекторов от обычных классов заключается в том, что плейсхолдерные селекторы не выводятся в скомпилированный CSS, если ни один другой селектор не расширяет их. Обычные классы всегда включаются в CSS, даже если они не используются в HTML.

Когда использовать плейсхолдерные селекторы

• Для определения базовых стилей, которые будут использоваться несколькими похожими компонентами или элементами.
• Для создания "абстрактных" стилей, которые сами по себе не имеют визуального представления, но предоставляют основу для других стилей.
• Для следования принципу DRY (Don't Repeat Yourself), избегая дублирования стилей.

Заключение

Плейсхолдерные селекторы - это мощная и эффективная функция SCSS, которая способствует созданию более чистого, организованного и поддерживаемого CSS кода за счет переиспользования стилей без необходимости добавления лишних классов в HTML. Они являются ключевым инструментом для построения масштабируемых и модульных CSS-архитектур.