Platzhalterselektoren

Sass hat eine spezielle Art von Selektoren, die als „Platzhalter“ bekannt sind. Sie sehen aus und verhalten sich fast wie Klassenselektoren, beginnen aber mit einem % und werden nicht in der CSS-Ausgabe enthalten. Tatsächlich werden alle komplexen Selektoren (die zwischen den Kommas) , die überhaupt einen Platzhalter-Selektor *enthalten*, nicht in den CSS-Code aufgenommen, ebenso wenig wie Stilregeln, deren Selektoren alle Platzhalter enthalten.

Spielplatz

SCSS-Syntax

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

%strong-alert:hover {
  color: red;
}
Spielplatz

Sass-Syntax

.alert:hover, %strong-alert
  font-weight: bold


%strong-alert:hover
  color: red

CSS-Ausgabe

.alert:hover {
  font-weight: bold;
}

Welchen Nutzen hat ein Selektor, der nicht ausgegeben wird? Er kann trotzdem erweitert werden! Im Gegensatz zu Klassenselektoren überladen Platzhalter die CSS-Datei nicht, wenn sie nicht erweitert werden, und sie zwingen Benutzer einer Bibliothek nicht, bestimmte Klassennamen für ihren HTML zu verwenden.

Spielplatz

SCSS-Syntax

%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;
}
Spielplatz

Sass-Syntax

%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-Ausgabe

.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;
}

Platzhalter-Selektoren sind nützlich beim Schreiben einer Sass-Bibliothek, bei der jede Stilregel möglicherweise verwendet wird oder auch nicht. Als Faustregel gilt: Wenn Sie eine Stylesheet nur für Ihre eigene Anwendung schreiben, ist es oft besser, einfach einen Klassenselektor zu erweitern, wenn einer verfügbar ist.