Hauptmenü

Untermenü

SCSS - Grundlagen

1. Das Prinzip

SCSS basiert auf einem einfachen Satz von Regeln, die sich geschätzt zu 80% an CSS orientieren. Allerdings wird dadurch die Flexibilität deutlich erhöht.

2. Was passiert bei der "Kompilierung"?

Nun Koala (oder genauer gesagt der Sass-Präprozessor) geht durch die SCSS-Datei und erstellt anhand der dortigen Anweisungen die CSS-Datei.

Das bedeutet Folgendes. Für den Live-Betrieb nimmt man nach wie vor die CSS-Datei, da Browser mit SCSS und den entsprechenden Anweisungen nicht umgehen können. Wir haben es also mit einem Hilfsmittel zu tun, das während der Entwicklung eingesetzt wird.

Und wieso dann das Buhei?

Nun, wie wir alle wissen, hat CSS gewisse Mängel. Und da setzt Sass/SCSS an. Durch die erweiterte Syntax spart man sich Tipparbeit und Doppelungen. Außerdem kann man den Code viel übersichtlicher strukturieren und ist alles in allem viel flexibler.

3. Ein Beispiel

Damit wären wir auch gleich bei der ersten Möglichkeit, die SCSS bietet. Nämlich bei den Variablen. Die beginnen wie in PHP mit einen $-Zeichen, also zum Beispiel:


$bgcolor#f00;

Die Zuweisung erfolgt dann so:


body {     
  background$bgcolor;
}
.wrapper {
  background$bgcolor;
}

Und daraus wird dann in der CSS-Datei ein


body {     
  background#f00;
}
.wrapper {
  background#f00;
}

An diesem kleinen Beispiel kann schon sehr schön die Vorteile von SCSS erkennen. Man definiert in diesem Fall einen Farbwert und wenn der sich ändert, so muss man den nur an einer Stelle ändern.

Bei den Variablen muss man natürlich noch ein paar Feinheiten beachten, aber dazu komme ich später.

4. Ein Hinweis

Koalo "kompiliert" die CSS-Dateien immer als UTF-8. Das könnt ihr dann in der erzeugten CSS-Datei ganz oben sehen, wo die Anweisung @charset "UTF-8"; eingefügt wurde. Stellt euch also darauf ein.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt