Webseiten benötigen eigentlich nicht viel. Einen Server, eine Domain und etwas HTML. Wer aber nicht im Niveau der 90er Jahre stecken bleiben möchte, kommt nicht um CSS, SASS oder LESS, den Stylesheet-Sprachen, herum. Es ist eine absolute Selbstverständlichkeit geworden und kein Webdesigner oder -entwickler wird CSS nicht hervorragend beherrschen. Mit der aktuellen Version 3 sind sogar einfache Animationen und andere Spielereien möglich, für die kein zusätzliches JavaScript benötigt wird.
CSS ist aber heute nicht mehr der aktuellste Standard. Denn immer häufiger wird auf SASS oder LESS gesetzt. Insbesondere bei komplexeren Systemen empfiehlt es sich dringend einer der beiden Sprachen zu nutzen. Denn sie erweitern CSS um wichtige Funktionen.
Der Sinn von SASS und LESS
Bevor wir auf die Vorteile im Einzelnen eingehen, erklären wir dir wofür diese Sprachen überhaupt benötigt werden. Wähend HTML nur das absolute Grundgerüst einer Webseite darstellt und die Inhalte in ein Konzept bringt, also Überschriften von Fließtexten, Bildern und Tabellen trennt, gibt CSS dem Ganzen das Design. Dabei arbeitet CSS mit Selektoren, die allen gemeinsamen Elementen Regeln zuweisen, die die Optik definieren. Also allen Überschriften eine bestimmte Farbe, allen Texten eine bestimmte Größe, und so weiter. Ein sauberes Stylesheet erkennt man daran, dass es die kleinstmöglichen Gemeinsamkeiten zusammenfasst und sich dadurch nicht wiederholt. Zu große oder unnötig viele CSS-Anweisungen verzögern auch die Ladezeiten.
Das klassische CSS hat aber seine Grenzen, an die man recht schnell stößt, je weiter man es optimieren möchte. Beispielsweise muss die Farbe eines Elements immer wieder neu über einen HEX- oder RGB-Wert angegeben werden. Egal wie oft dieser benötigt wird. Natürlich kann man den Wert auch nur ein Mal angeben, hat dann aber eine sehr lange Liste an Selektoren. Beides scheint nicht übersichtlich, besonders wenn man das Design überarbeitet und aktualisiert.
Beide Stylesheet-Sprachen bieten hierfür einige Vorteile. Beispielsweise lassen sich im Vorfeld Variablen anlegen. Besonders praktisch für immer wiederkehrende Farben, Schriftarten und Schriftgrößen. Ändert sich ein Mal das Corporate Design, müssen nur die Werte der Variablen angepasst werden und das gesamte Script übernimmt die Änderung vollautomatisch. Auch einfache Schleifen, Funktionen und Vererbungen sind möglich. Dadurch vereinfacht sich die Arbeit am Design.
Dabei stehen die Stylesheet-Sprachen nicht als Alternative zu CSS. Sie gelten als Präprozessoren. Das bedeutet, sie konvertieren die eigene Syntax in eine für jeden Browser verständliche CSS-Datei. Die erleichterte Arbeit mit SASS und LESS liegt also im Vordergrund und hat keine direkte Verbesserung für die Interpretation durch den Browser.
Vor- und Nachteile von SASS
Neben der einfacheren Struktur, den besseren Übersichtlichkeit und einer zugänglichen Aktualisierbarkeit, bietet SASS ein paar Funktionen mehr als sein Konkurrent. Es zeigt unter anderem Fehler in der Syntax an. Dadurch ist auch das Debugging deutlich einfacher. Das ist eine sehr wichtige Fähigkeit, denn die Scriptsprache ist ausgesprochen mächtig, wenn es um individuelle Funktionen geht. Sie sind natürlich nicht so komplex wie in JavaScript, PHP und Co., aber überraschend hilfreich beim Design.
Insgesamt sind die Syntactically Awesome Stylesheets dadurch auch komplexer und umfangreicher als LESS. Es hat einen schwereren Einstieg, auch wenn die Dokumentation sehr gut beschrieben ist. Neben dem Lernaufwand ist auch das notwendige Compiling eventuell abschreckend, wenn man nur kleine Projekte plant.
Vor- und Nachteile von LESS
Die Syntax dieser Stylesheet-Sprache ist deutlich näher an CSS angelehnt. Daher ist der Einstieg für viele auch deutlich einfacher. Es ist sogar problemlos möglich CSS in LESS anzuwenden. Bestehende Stylesheets können ohne Konflikte direkt kombiniert werden. Shopsysteme wie Shopware setzten auch in Version 5 auf den Präprozessor, da es keiner Kompilierung bedarf und leichter umzusetzen ist.
Allerdings fehlt ihm die für Programmiersprachen typischen individuellen Funktionen, Schleifen und Fallunterschiede. Vielen könnte hier die Komplexität fehlen. Außerdem steigt die Beliebtheit der Syntactically Awesome Stylesheets enorm. LESS hat einen seiner größten Unterstützer eingebüßt. Das Bootstrap-Framework hat seit Version 4 offiziell zu SASS gewechselt. Deshalb hat auch Shopware mit Version 6 SASS bevorzugt.
Für wen es geeignet ist
Wer ernsthaft ein Webdesign entwickeln und in einem Theme oder Frontend umsetzen möchte, sollte alleine schon der Übersichtlichkeit auf eine Stylesheet-Sprache wechseln. Wer keine großen Projekte bedient und wenig professionell aufgestellt sein will, kann mit LESS beginnen. Der einfache Umgang benötigt keine große Lernkurve und ermöglicht den direkten Einstieg. Wer allerdings ernsthaft entwickeln möchte und vor allem zukunftsorientiert arbeiten will, muss wohl auf die Syntactically Awesome Stylesheets setzen. Das bringt aber auch viele Vorteile, die das eigene Arbeiten erleichtern.
