CSS-Präprozessoren erklärt

CSS-Präprozessoren werden zunehmend zu einer tragenden Säule im Workflow von Front-End-Webentwicklern. CSS ist eine unglaublich komplizierte und nuancierte Sprache. Um die Verwendung zu vereinfachen, verwenden Entwickler häufig Präprozessoren wie SASS oder LESS.

CSS-Präprozessoren kompilieren den Code, der mit einem speziellen Compiler geschrieben wurde. Damit erstellen sie eine CSS-Datei, auf die das Haupt-HTML-Dokument verweisen kann.

Wenn Sie einen CSS-Präprozessor verwenden, können Sie in normalem CSS genauso programmieren, wie wenn der Präprozessor nicht vorhanden wäre. Das Gute ist, dass Ihnen auch mehr Optionen zur Verfügung stehen. Einige, wie z. B. SASS, haben spezielle Stilstandards, die das Schreiben des Dokuments noch einfacher machen sollen, z. B. die Freiheit, geschweifte Klammern wegzulassen, wenn Sie möchten.

Natürlich bieten CSS-Präprozessoren auch andere Funktionen. Viele der angebotenen Funktionen sind bei Präprozessoren unglaublich ähnlich, mit nur geringfügigen Abweichungen in der Syntax. So können Sie so ziemlich jeden auswählen, den Sie möchten, und Sie werden in der Lage sein, die gleichen Dinge zu erreichen. Einige der nützlicheren Funktionen sind:

Variablen

Eines der am häufigsten verwendeten Elemente in jeder Programmiersprache ist die Variable, was CSS besonders fehlt. Wenn Sie Variablen zur Verfügung haben, können Sie einen Wert einmal definieren und im gesamten Programm wiederverwenden. Ein Beispiel hierfür in SASS wäre:

$yourcolor: #000056 .yourDiv { color: $yourcolor; }

Durch SASS yourcoloreinmaliges Deklarieren der Variablen ist es jetzt möglich, dieselbe exakte Farbe im gesamten Dokument wiederzuverwenden, ohne die Definition jemals erneut eingeben zu müssen.

Schleifen

Ein weiteres häufiges Element in Sprachen sind Schleifen, etwas anderes fehlt CSS. Mit Schleifen können dieselben Anweisungen mehrmals wiederholt werden, ohne dass sie mehrmals erneut eingegeben werden müssen. Ein Beispiel mit SASS wäre:

@for $vfoo 35px to 85px { .margin-#{vfoo} { margin: $vfoo 10px; } }

Diese Schleife erspart uns das mehrfache Schreiben desselben Codes, um die Randgröße zu ändern.

If / Else-Anweisungen

Ein weiteres Merkmal, das CSS fehlt, sind If / Else-Anweisungen. Diese führen nur dann eine Reihe von Anweisungen aus, wenn eine bestimmte Bedingung erfüllt ist. Ein Beispiel hierfür in SASS wäre:

@if width(body) > 500px { background color: blue; } else { background color: white; }

Hier ändert sich die Farbe der Hintergrundfarbe abhängig von der Breite des Seitenkörpers.

Dies sind nur einige der Hauptfunktionen von CSS-Präprozessoren. Wie Sie sehen können, sind CSS-Präprozessoren unglaublich nützliche und vielseitige Werkzeuge. Viele Webentwickler verwenden sie, und es wird dringend empfohlen, mindestens einen von ihnen zu lernen.

Mehr Informationen:

  • Die besten CSS-Tutorials
  • SASS-Dokumente: //sass-lang.com/
  • SASS, ein Präprozessor für Ihre Webgarnituren
  • WENIGER docs: //lesscss.org/
  • Stiftdokumente: //stylus-lang.com/