Was wurde eigentlich aus LESS, Stylus, Sass…?

Wenn man alte Backups durchschaut, findet man manchmal Dinge, an die man sich kaum erinnert. Eines davon war LESS, ein so genannter CSS-Preprocessor. Damit konnte man CSS gewissermaßen „programmieren“, und der Code wurde dann in eine CSS-Datei umgewandelt.

Less war intuitiv, Javascript-basiert, konnte Variablen, Mixins, Operationen, und mit etwas Geschick brachte man damit sogar eine Art Loop hin, mit dem ich früher mal Schriften Responsive machte. Allerdings wurde mit Aufkommen von SCSS recht schnell klar, LESS würde wohl nicht die Standards der Zukunft definieren. Doch LESS gibt es noch, und wer es gerne mag, kann es in seinen Projekten verwenden.

In LESS wird ein Mixin wie eine Funktion definiert und kann mit oder ohne Parameter verwendet werden.

.buttonStyle(@color, @padding: 10px) {
  background-color: @color;
  padding: @padding;
  border: none;
  border-radius: 5px;
  color: #fff;
}

.button {
  .buttonStyle(#007BFF, 15px);
}

.secondaryButton {
  .buttonStyle(#6C757D);
}

Bevor es LESS gab, wurde allerdings SASS entwickelt, sozusagen der Vorreiter unter den Prepocessors.

=buttonStyle($color, $padding: 10px)
  background-color: $color
  padding: $padding
  border: none
  border-radius: 5px
  color: #fff

.button
  +buttonStyle(#007BFF, 15px)

.secondaryButton
  +buttonStyle(#6C757D)

Mit SCSS kam eine neue Syntax die als Ergänzung zu SASS eingeführt wurde (SASS verwendet Einrückungen, SCSS hingegen wie CSS mit geschweiften Klammern). SCSS unterstützte die klassische CSS-Syntax, was CSS-Geübten vertraut war. Man konnte potentiell sein ganzes CSS auch wie gewohnt in SCSS schreiben. SCSS ist also gewissermaßen die alternative Syntax für SASS.

@mixin buttonStyle($color, $padding: 10px) {
  background-color: $color;
  padding: $padding;
  border: none;
  border-radius: 5px;
  color: #fff;
}

.button {
  @include buttonStyle(#007BFF, 15px);
}

.secondaryButton {
  @include buttonStyle(#6C757D);
}

Von Stylus hatte ich wohl auch mal gehört, allerdings nie damit gearbeitet. Es kam etwa zur gleichen Zeit heraus wie LESS (2010), und wie LESS kann man es heute noch in seine Projekte einbinden. Beispiel für ein Mixin in der Syntax von Stylus:

buttonStyle(color, padding = 10px)
  background-color: color
  padding: padding
  border: none
  border-radius: 5px
  color: #fff

.button
  buttonStyle(#007BFF, 15px)

.secondaryButton
  buttonStyle(#6C757D)

Durch seine Kompatiblität mit CSS und Unterstützung durch große Frameworks wie z.B. Bootstrap hat sich SCSS bereits recht früh durchgesetzt. Das heißt nicht, dass andere Preprocessors nicht mehr eingesetzt werden. Allerdings habe ich schon lange keinen anderen Preprocessor mehr gesehen außer SCSS.

Die für mich größten Vorteile sind weniger Schreibarbeit durch die Syntax, bessere Strukturierung als pures CSS, und auch die Auftreilung in mehrere nach Themen oder Bereichen aufgeteilte Dateien die es leichter machen, den Überblick zu behalten und sein CSS zu organisieren. Am Ende kann man ja alles in einer einzigen CSS-Datei zusammenführen.