Hauptmenü

Untermenü

SCSS - Platzhalter

1. Allgemeines

Damit kann man übergeordnete Selektoren "übernehmen". Das gilt sowohl für ID- oder Klassenselektoren als auch Pseudoklassen beziehungsweise -elemente. Dafür wird das &-Zeichen vorangestellt.

2. ID- oder Klassen-Selektoren

In diesem Fall wird die Bezeichnung und der Typ (ID/Klasse) des Elternselektors auf den Kindselektor vererbt. Das setzt natürlich eine sehr stringente Bezeichnung voraus.


.blubb {
  &-slider {
    background#ff0;
  }
}
/* wird zu */
.blubb-slider {
  background#ff0;
}

Uffbasse!

Übergeordnete Selektoren werden nur dann in die CSS-Datei übernommen, wenn sie ebenfalls Werte beinhalten. Also zum Beispiel so:


.blubb {
  width100%;
  &-slider {
    background#ff0;
  }
}
/* wird zu */
.blubb {
  width100%;
}
.blubb-slider {
  background#ff0;
}

Und das gilt immer, nicht nur bei den Platzhaltern sondern ist eine universelle Regel von SCSS. Also merken!

3. Pseudoklassen


{
  &:hover {
    text-decorationunderline;
  }
  &:after {
    box-sizingborder-box;
  }
}
/* Wird zu */>
a:hover {
  text-decorationunderline;
}
a:after {
  box-sizingborder-box;
}

4. HTML-Selektoren

Ist zwar möglich aber völlig sinnfrei. So wird aus einem


{
  color#000;
  & {
    text-decorationunderline;
  }
}

ein


{
  color#000;
}
{
  text-decorationunderline;
}

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt