47 VIEWS

It’s #FrontendFriday – CSS-Präprozessoren

23.07.2021

CSS spielt in der Frontendentwicklung eine wichtige Rolle. Jedoch ist die Syntax sehr eingeschränkt und komplexe Implementierungen werden unübersichtlich oder sind schlichtweg nicht realisierbar. Präprozessoren wie SCSS oder LESS können hierbei unterstützen.

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:

CSS:

 

Einsatz von Berechnungen und Funktionen

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

Beispiel Berechnung:

SCSS:

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

CSS:

 

Beispiel „each“:

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

SCSS

CSS:

 


Einsatz von Eltern-Selektoren

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

SCSS:

CSS:

 

Fazit

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!

 


Quellen:

[1] WEB: t3n – Sass vs. Less: So findest du den richtigen Präprozessor für dich

[2] WEB: IONOS – SASS: CSS auf dem nächsten Level?

[3]  LITERATUR: Web Design mit SASS – Eine Einführung in moderne Stylesheets (Jonas Hellwig, 2014)

Zurück zur Übersicht

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*Pflichtfelder

*