Netz - Rettung - Recht

LESS? SASS? Hä?

LESS und SASS (Syntactically Awesome Stylesheets) sind CSS-Präprozessoren; man könnte sie vielleicht auch als CSS-Compiler bezeichnen. Sie erzeugen aus einer CSS-ähnlichen, aber mächtigeren Sprache gültige CSS-Dateien, konzeptionell entfernt ähnlich der Art und Weise, in der bspw. PHP und andere in der Webentwicklung verwendete Scriptsprachen HTML erzeugen.

Wenn man ein einheitliches Design für seine Webseiten erstellen möchte, ist es oft wichtig, dass die einzelnen Elemente aufeinander abgestimmt sind. So sollten sich bspw. Schriftgrößen von Text und Überschriften miteinander harmonieren, vielleicht finden sich auch bestimmte charakteristische Farbelemente, die das Seitendesign prägen. Wäre es nicht schön, wenn man mit wenig Aufwand Änderungen an allen notwendigen Stellen vornehmen könnte, also bspw. die bisher verwendete Farbe x überall durch die Farbe y ersetzen? Oder die Schriftgröße des Fließtextes erhöhnen und dabei die Schriftgröße von Überschriften und anderen, besonderen Elementen proportional ändern? Das und mehr geht mit LESS und SASS.

Sowohl LESS als auch SASS sind notwendiger oder ergänzender Bestandteil der von mir bereits vorgestellten Frontend-Frameworks und für diejenigen, die damit umgehen können, fraglos ein wichtiger Bestandteil zeitgemäßer Webentwicklung.

(Ich zähle mich allerdings nur sehr bedingt zu diesem Personenkreis, weshalb dieser Überblicksartikel ein gewisses Wagnis darstellt - ich erzähle hier mehr oder weniger als Blinder von der Farbe).

LESS

LESS bietet die Möglichkeit, Variablen zu definieren - bspw. eine bestimmte Farbe - und diese Variablen dann in CSS-Definitionen zu verwenden. Ändert man die Variable, ändern sich - nach der Neucompilierung - alle damit verbundenen Definitionen.

Mixins heben dieses Konzept auf eine neue Ebene: sie ermöglichen es, ganze CSS-Definitionen in andere Definitionen zu importieren und dabei ggf. noch Parameter zu übergeben. Auch hier gilt natürlich wieder: ändert man das Mixin, ändern sich alle Defitionen, die es importieren.

Darüber hinaus erlaubt LESS den Einsatz von Funktionen und Operatoren. So kann bspw. eine bestimmte Schriftgröße für den Fließtext vorgegeben und dann definiert werden, dass die Überschriftenebene <h6> genau so groß, aber fettgedruckt sein soll, die Überschriftenebene <h5> aber 1.1x so groß und die Ebene <h1> 2x so groß. Farben können als “10% heller” (oder dunkler, oder satter, oder …) als eine andere Farbe definiert werden, ohne dasss dies jeweils manuell in Farbwerten berechnet werden müsste - und ändert man die zur Grundlage genommene Farbe, ändern sich auch die anderen, daraus “berechneten” Farben automatisch mit!

Schließlich bietet LESS die Möglichkeit, CSS-Definitionen ineinander zu verschachteln, also bspw. zunächst grundsätzliche Eigenschaften einer Klasse und dann bestimmter Elemente dieser Klasse zu definieren.

Wem das alles zu trocken klingt, der findet auf LESScss.de eine Erläuterung mit Beispielen, die vollständige Dokumentation, Downloadmöglichkeiten und mehr in deutscher Sprache.

SASS

Für SASS … gilt im Prinzip dasselbe, was ich zuvor bereits gesagt habe; nur habe ich SASS bisher nicht selbst ausprobiert.

Mehr zu SASS gibt es (in englischer Sprache) auf SASS-lang.com, einen Vergleich der beiden Sprachen (Stand 2012) bspw. bei CSS-Tricks.

Würde ich mehr davon verstehen, könnte ich sicherlich auch die bestehenden Unterschiede, Vorteile und Nachteile der beiden Sprachen darstellen; insoweit muss ich leider passen und freue mich auf die Ergänzungen und Richtigstellungen in den Kommentaren.

Dieser Beitrag gehört zur Reihe “Webdesign anno 2015”.

[Dieser Eintrag wurde nachträglich im Februar 2015 veröffentlicht.]