Wofür werden Präprozessoren in der Entwicklung…

CSS-Präprozessoren (Sass, Less, Stylus) erweitern die Möglichkeiten von CSS, indem sie hinzufügen:

Variablen: Ermöglichen das Speichern von Werten (Farben, Schriftarten) für die wiederholte Verwendung.
```
// Variable in Sass
$primary-color: #3498db;

body {
  color: $primary-color;
}
```

Verschachtelung: Ermöglicht das Verschachteln von CSS-Regeln, die die HTML-Struktur widerspiegeln.

// Verschachtelung in Sass
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      display: inline-block;
    }
  }
}

Mixins: Ermöglichen die Wiederverwendung von CSS-Declaration-Gruppen.

// Mixin in Sass
@mixin clearfix {
  &::after {
    display: table;
    content: "";
    clear: both;
  }
}

.container {
  @include clearfix;
}

Funktionen: Ermöglichen Berechnungen und die Verarbeitung von Werten.

// Funktion in Sass
$grid-columns: 12;

@function grid-width($n) {
  @return ($n / $grid-columns) * 100%;
}

.col-6 {
  width: grid-width(6);
}

Import: Ermöglicht die Aufteilung von CSS in Module und deren Einbindung in die Hauptdatei.

// Import in Sass
@import "variables";
@import "mixins";

body {
  font-family: $base-font;
}

Dies verbessert die Code-Organisation, reduziert Duplikate, erhöht die Lesbarkeit und beschleunigt die Entwicklung. Schließlich kompiliert der Präprozessor den Code in normales CSS, das Browsern verständlich ist.

Wofür werden Präprozessoren in der Entwicklung verwendet?