Kann CSS mit den Preprozessoren gleichziehen?
Preprozessoren haben den Einsatz von CSS vereinfacht und erweitert: Sie brachten CSS-Variablen und Mixins ein und verschachtelte CSS-Regeln.
- Variablen
- Verschachtelung
- Mixins / Funktionen
- Partials & Imports
- Mathematische Berechnungen
Damit haben sie CSS genauso vorangebracht wie jQuery das moderne JavaScript. Die Frage ist nun: Brauchen Webseiten heute noch Preprozessoren oder kann ihnen CSS heute entgegentreten?
JavaScript hat jQuery schon seit einigen Jahren überholt, während CSS länger brauchte, um nach den Preprozessoren zu greifen: Variablen (Custom Properties) sind zwar schon seit längerem auch im nativen CSS verankert, aber Nesting – das Verschachteln von CSS-Regeln – ist erst in jüngerer Zeit auf den Zug aufgesprungen.
:root {
--color-primary: oklch(60% 0.15 250);
}
.card {
padding: clamp(1rem, 2vw, 2rem);
& h2 {
color: var(--color-primary);
}
}
Da haben wir also Variablen (–color-primary) in einem wahrnehmungsbasierten Farbraum (OKLCH), eine Berechnung mit clamp() und Nesting, das Verschachteln von CSS-Eigenschaften.
SASS Mixins
Mixins legen Blöcke von CSS-Eigenschaften fest, die an mehreren Stellen verwendet werden können.
@mixin button-style($color, $padding) {
background-color: $color;
border: none;
color: white;
cursor: pointer;
padding: $padding;
text-transform: uppercase;
}
Mit diesem Mixin können Buttons mit unterschiedlichen Farben und Padding definiert werden.
.button-primary {
@include button-styles(tomato, 1rem);
}
.button-secondary {
@include button-styles(cornflower blue, 0.9rem);
}
Auch wenn CSS-Variablen eine ähnliche Funktionalität bieten: Mixins sind da noch einen Schritt voraus.
Nesting – Verschachteln von CSS-Regeln
Nesting verbessert die Lesbarkeit und erlaubt eine effizientere Organisation des CSS-Codes. CSS Nesting und hat sich Ende 2023 in allen modernen Browsern etabliert.
.header {
background: var(--branding-color);
& .logo {
width: 120px;
&:hover {
border-bottom: 1px solid black
}
}
}
Alle modernen Browser unterstützen natives CSS Nesting.
CSS-Funktionen für mathematische Operationen
CSS hat mit Funktionen wie calc() und clamp() zu den Präprozessoren aufgeschlossen. min() und max() sind schon fast alte Hasen. Selbst trigonometrische Funktionen wie sin() und tan() werden von dem Mainstream-Browsern seit Ende 2022 unterstützt.
Modernes CSS oder LESS / SASS?
Für das reine CSS spricht der einfache Arbeitsablauf, während Preprozessoren Übersetzungsschritte brauchen. Projekte im Produktionszustand lassen sich aber nicht ohne Aufwand in modernes CSS migrieren.
Die Hochzeit der Preprozessoren ist vorbei. LESS im Speziellen ist wenig aktiv, bringt kaum noch neue Ideen. Wenn überhaupt noch Preprozessoren eingesetzt werden, dann eher SASS. Das moderne CSS ist dynamischer, flexibler und besser wartbar.
