Плейсхолдеры селекторов

Sass имеет особый тип селектора, известный как «плейсхолдер». Он выглядит и ведет себя очень похоже на селектор класса, но начинается с % и не включается в выходной CSS. Фактически, любой сложный селектор (те, что разделены запятыми), даже если он содержит плейсхолдерный селектор, не включается в CSS, также как и любое правило стиля, все селекторы которого содержат плейсхолдеры.

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

%strong-alert:hover {
  color: red;
}
// SASS
.alert:hover, %strong-alert
  font-weight: bold


%strong-alert:hover
  color: red
/* CSS */
.alert:hover {
  font-weight: bold;
}

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

%toolbelt {
  box-sizing: border-box;
  border-top: 1px rgba(#000, .12) solid;
  padding: 16px 0;
  width: 100%;

  &:hover { border: 2px rgba(#000, .5) solid; }
}

.action-buttons {
  @extend %toolbelt;
  color: #4285f4;
}

.reset-buttons {
  @extend %toolbelt;
  color: #cddc39;
}
// SASS
%toolbelt
  box-sizing: border-box
  border-top: 1px rgba(#000, .12) solid
  padding: 16px 0
  width: 100%

  &:hover
    border: 2px rgba(#000, .5) solid

.action-buttons
  @extend %toolbelt
  color: #4285f4


.reset-buttons
  @extend %toolbelt
  color: #cddc39
/* CSS */
.reset-buttons, .action-buttons {
  box-sizing: border-box;
  border-top: 1px rgba(0, 0, 0, 0.12) solid;
  padding: 16px 0;
  width: 100%;
}
.reset-buttons:hover, .action-buttons:hover {
  border: 2px rgba(0, 0, 0, 0.5) solid;
}

.action-buttons {
  color: #4285f4;
}

.reset-buttons {
  color: #cddc39;
}

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

© 2006–2025 the Sass team, and numerous contributors
Licensed under the MIT License.
https://sass-lang.com/documentation/style-rules/placeholder-selectors