11.082014

Was sind CSS-Präprozessoren?

In meinen letzten Blogposts, gerade auch in Verbindung mit Grunt, ist immer wieder der Begriff CSS Präprozessor bzw. SASS oder LESS aufgetaucht. Aber was ist das eigentlich genau?

CSS-Präprozessoren soll die Erstellung von Cascading Stylesheets erleichtern. CSS kennt keine Variablen oder Funktionen. Ein Präprozessor schon. Damit bekommt man Funktionen und Variablen zur Verfügung gestellt, mit denen aus der Quelldatei das fertige CSS generiert wird. Die bekanntesten Preprozessoren für CSS sind LESS oder Sass. Alles über SASS findest Du unter http://sass-lang.com, für LESS unter http://lesscss.org.

Ein kleines Beispiel um den Vorteil kurz zu zeigen:

SASS Code

$text-size: 10px
$font: Arial, Helvetica, sans-serif

body {
  font-size: $text-size;
  font-family: $font;
}

p {
  font-size: $text-size;
}
Genierter CSS  Code

body {
  font-size: 10px;
  font-family: Arial, Helvetica, sans-serif
}

p {
  font-size: 10px;
}

In diesem Beispiel wird eine Variable verwendet die an verschiedenen Stellen eingesetzt wird. Der Vorteil in diesem Beispiel. Ändere ich die Variable wird an allen Stellen automatisch der neue Wert eingesetzt. Das ganze geht natürlich auch mit Farben.

Eine gute Seite mit Syntaxbeispielen zu allen CSS-Präprozessoren findest Du unter: http://csspre.com. Um die SASS-Beispiele direkt auszuprobieren empfehle ich dir http://sassmeister.com. Dort kannst Du einfach in einer Sandbox SASS-Code testen. Für Less gibt es http://lesscssismore.com/.

Lern uns kennen!