Preprozessoren vs einfach CSS

Kann CSS mit den Preprozessoren gleichziehen?

Preprozessoren haben den Einsatz von CSS vereinfacht und erweitert: Sie bringen CSS-Variablen und Mixins ein und verschachteln CSS-Regeln. 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 erst jetzt nach den Präprozessoren greift: 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üngster Zeit auf den Zug aufgesprungen.

CSS-Variablen – Custom Properties

SASS
@branding-color: #074321;
.header {
	color: @branding-color;
}

CSS
:root {
	--branding-color: #074321;
}

.header {
	color: var(--branding-color);
}

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
		}
	}
}

Der Support für Nesting liegt bei etwa 90%. Muss man jetzt ein gutes Jahr abwarten, bis auch die Nachzügler ihre Browser auf den neusten Stand bringen?

Ein großer Vorteil der Preprozessoren besteht in ihrer »bedenkenlosen« Anwendung. Da die CSS-Dateien der Preprozessoren übersetzt werden, muss niemand einen Blick in die Glaskugel werfen.

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.