It’s #FrontendFriday – CSS-Präprozessoren

Was sind CSS-Präprozessoren?

CSS-Präprozessoren sind Syntaxerweiterungen für CSS (Cascading Style Sheet). Mithilfe von Präprozessoren können beispielsweise Variablen, Hierarchien oder auch Funktionen erstellt und verwendet werden. Dies erhöht die Wiederverwendbarkeit, die Wartbarkeit und letztendlich die Einsatzmöglichkeiten von CSS-Code innerhalb eines Projekts. Der Anwender kann zum Beispiel eine Variable für einen bestimmten Farbton erstellen und in anderen Komponenten wiederzuverwenden.
Nach der Kompilierung des Source-Codes wird jedoch erneut simpler CSS-Code an den Client ausgeliefert. Dadurch können keine Probleme im Browser auftreten. [1] [2]

Was sind die Vor- und Nachteile von CSS-Präprozessoren?

Es wurden bereits einige Vorteile erwähnt. Hier sollen nun noch mal die wichtigsten Vorteile aufgeführt und anhand von SCSS-Code Snippets erläutert werden.

Einsatz von Variablen

Mit Variablen können beispielsweise Farbtöne gespeichert und in anderen CSS-Klassen verwendet werden. Sollte sich der Farbton ändern, so muss nur an einer einzigen Stelle der Farbcode angepasst werden. Dies erhöht deutlich die Wartbarkeit des Codes. [3]

SCSS:

$pink: #ff007e;
p {
  color: $pink;
}

CSS:

p {
  color: #ff007e;
}

Einsatz von Berechnungen und Funktionen

Durch den Einsatz von Funktionen können Berechnungen, Schleifen und Bedingungen verwendet werden. [3]

Beispiel Berechnung:

SCSS:

div {
  width: 100% - 200px;
}

Sollte die Breite 1920px betragen, so wird der Code folgendermaßen kompiliert:

CSS:

div {
  width:1720px;
}

Beispiel „each“:

Mit @each können, ähnlich wie bei einer for-each-Schleife, Elemente einer Liste abgerufen und eingesetzt werden. [3]

SCSS

$icon-list: home, employees, imprint;

@each $icon in $icon-list {
  .icon-#{$icon} {
    background: url('img/icon-#{$icon}.png');
  }
}

CSS:

.icon-home {
  background: url("img/icon-home.png");
}

.icon-employees {
  background: url("img/icon-employees.png");
}

.icon-imprint{
  background: url("img/icon-imprint.png");
}

Einsatz von Eltern-Selektoren

Eltern-Selektoren erhöhen die Lesbarkeit des Codes und stellen Abhängigkeiten verschiedener CSS-Klassen besser dar. [3]

SCSS:

a {
  text-decoration: none;
  font-size: 1.8em;
  color: black;
  &:hover {
    text-decoration:underline;
    color: blue;
  }
}

CSS:

a {
  text-decoration: none;
  font-size: 1.8em;
  color: black;
}
a:hover {
  text-decoration: underline;
  color: blue;
}

Der Einsatz von Präprozessoren ist zu Beginn möglicherweise etwas ungewohnt, doch die Effizienz und Vielfalt an neuen Möglichkeiten ist es wert, sich damit auseinanderzusetzen.

Die Webfront-AG wünscht ein schönes und erholsames Wochenende!

Mehr über Frontend Entwicklung erfahren

Quellen: