CSS-Präprozessoren

CSS-Präprozessoren sind Skriptsprachen, die CSS um zusätzliche Funktionen erweitern und anschließend in standardkonformes CSS übersetzen (kompilieren). Sie ermöglichen eine effizientere, strukturiertere und wartbarere Stylesheet-Entwicklung.

Warum werden Präprozessoren verwendet?

Standard-CSS hat einige Einschränkungen:
• Keine Variablen (bis CSS3 mit –custom-properties)
• Keine verschachtelten Regeln (Nesting)
• Keine Mixins/Funktionen
• Schlechte Wiederverwendbarkeit von Code
Präprozessoren lösen diese Probleme durch erweiterte Syntax und zusätzliche Funktionen.

Beliebte CSS-Präprozessoren

Die bekanntesten sind:
• Sass/SCSS (am weitesten verbreitet)
• Less (einfach, ähnlich zu Sass)
• Stylus (flexiblere Syntax)

Wichtige Funktionen von Präprozessoren mit Beispielen

Variablen

Speichern von Werten zur Wiederverwendung.

SCSS:

$primary-color: #3498db;
$spacing: 1rem;

.button {
  background: $primary-color;
  padding: $spacing;
}

$primary-color: #3498db;
$spacing: 1rem;

.button {
  background: $primary-color;
  padding: $spacing;
}

Kompiliert zu CSS:

.button {
  background: #3498db;
  padding: 1rem;
}

.button {
  background: #3498db;
  padding: 1rem;
}

Nesting (Verschachtelung)

Strukturiere CSS-Regeln hierarchisch.

SCSS:

.nav {
  background: #333;

  ul {
    list-style: none;
  }

  a {
    color: white;

    &:hover {
      text-decoration: underline;
    }
  }
}

.nav {
  background: #333;

  ul {
    list-style: none;
  }

  a {
    color: white;

    &:hover {
      text-decoration: underline;
    }
  }
}

Kompiliert zu CSS:

.nav {
  background: #333;
}
.nav ul {
  list-style: none;
}
.nav a {
  color: white;
}
.nav a:hover {
  text-decoration: underline;
}

.nav {
  background: #333;
}
.nav ul {
  list-style: none;
}
.nav a {
  color: white;
}
.nav a:hover {
  text-decoration: underline;
}

Mixins (Wiederverwendbare Code-Blöcke)

Vermeiden von Code-Duplikation.

SCSS:

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  @include flex-center;
  height: 100vh;
}

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  @include flex-center;
  height: 100vh;
}

Kompiliert zu CSS:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Funktionen & Berechnungen

Dynamische Werte mit Operatoren.

SCSS:

$base-size: 16px;

@function toRem($px) {
  @return ($px / $base-size) * 1rem;
}

.text {
  font-size: toRem(24px); // → 1.5rem
}

$base-size: 16px;

@function toRem($px) {
  @return ($px / $base-size) * 1rem;
}

.text {
  font-size: toRem(24px); // → 1.5rem
}

Partials & Importe

Modulare Stylesheets.

SCSS:

// _variables.scss
$primary: #3498db;

// main.scss
@import 'variables';

.header {
  background: $primary;
}

// _variables.scss
$primary: #3498db;

// main.scss
@import 'variables';

.header {
  background: $primary;
}

Schleifen & Bedingungen

Generieren von CSS-Code dynamisch.

SCSS (Schleife):

@for $i from 1 through 3 {
  .mt-#{$i} {
    margin-top: #{$i * 10}px;
  }
}

@for $i from 1 through 3 {
  .mt-#{$i} {
    margin-top: #{$i * 10}px;
  }
}

Kompiliert zu CSS:

.mt-1 { margin-top: 10px; }
.mt-2 { margin-top: 20px; }
.mt-3 { margin-top: 30px; }

.mt-1 { margin-top: 10px; }
.mt-2 { margin-top: 20px; }
.mt-3 { margin-top: 30px; }

Beispiel-Projektaufbau mit Sass:

styles/  
├── main.scss          # Hauptdatei
├── _variables.scss    # Globale Variablen
├── _mixins.scss       # Mixins
└── components/        # Komponenten
    ├── _buttons.scss
    └── _navbar.scss

styles/  
├── main.scss          # Hauptdatei
├── _variables.scss    # Globale Variablen
├── _mixins.scss       # Mixins
└── components/        # Komponenten
    ├── _buttons.scss
    └── _navbar.scss

Kompilierung z. B. mit:

Für große Projekte sind Präprozessoren unverzichtbar – sie machen CSS zur einer vollwertigen Programmiersprache!

npm install -g sass
sass --watch input.scss output.css

npm install -g sass
sass --watch input.scss output.css

Vorteile von Präprozessoren

• Wartbarkeit – Strukturierter Code durch Variablen & Module.
• Wiederverwendbarkeit – Mixins & Funktionen vermeiden Redundanz.
• Effizienz – Schnellere Entwicklung durch Nesting & Logik.
• Browser-Kompatibilität – Autoprefixer kann eingebunden werden.

Nachteile von Präprozessoren

• Build-Schritt nötig – Muss zu CSS kompiliert werden (z. B. mit node-sass, gulp, webpack).
• Lernkurve – Neue Syntax gegenüber purem CSS.

Starke Funktionen

CSS-Präprozessoren wie Sass, Less oder Stylus erweitern CSS um starke Funktionen und sind heute in modernem Frontend-Development Standard. Sie verbessern die Code-Organisation, reduzieren Wiederholungen und ermöglichen komplexe Stylesheets mit weniger Aufwand.