CSS-Entwicklung mit Sass: effizienter & schneller

Je umfangreicher ein Website-Projekt ist, desto länger und unübersichtlicher werden auch die CSS Dateien. Bevor man also mal eben etwas am Aussehen ändern möchte, muss man sich erst durch unzählige Zeilen Code kämpfen, um die richtige Stelle zu finden. Fehler schleichen sich ein, Werte können nicht wiederverwendet werden, Passagen wiederholen sich. Als CSS-Anwender wirft man wehmütig einen Blick zu anderen (Programmier-) Sprachen, welche über nützliche Funktionen wie Variablen und Co. verfügen.

CSS Präprozessoren

Zum Glück gibt es für dieses Problem eine Lösung in Form von CSS Präprozessoren. Der Name verrät bereits, dass diese am Anfang des Workflows zum Einsatz kommen. Aus schlanken Dateien, in denen „Variablen“, „Funktionen“ und „Mixins“ verwendet werden können, entstehen so die fertigen CSS-Dateien. Die bekanntesten Vertreter sind derzeit Sass, LESS und Stylus. Welcher dieser Präprozessoren zum Einsatz kommt, hängt unter anderem vom jeweiligen Projekt sowie den eigenen Vorlieben ab. In diesem Beitrag möchten wir uns Sass genauer ansehen, welches wir auch selbst für die Erstellung von (WordPress) Websites nutzen.

Sass (Syntactically Awesome Stylesheets)

Nach eigenen Angaben ist Sass “the most mature, stable, and powerful professional grade CSS extension language in the world.” Es ist im Jahr 2007 erschienen und wurde von Hampton Catlin entwickelt. Auf der offiziellen Website finden sich viele Beispiele sowie eine ausführliche Dokumentation: sass-lang.com

Die Kernfunktionen und damit Basis von Sass sind:

• Variables (Variablen)
• Nesting (Verschachtelung)
• Import
• Mixins (wiederkehrende Funktionen bzw. Vorlagen)
• Extend / Inheritance (Erweiterung / Vererbung)
• Operators (Operatoren)

Mehr zu den einzelnen Funktionen erfahrt ihr im Folgenden.

Variablen

Wer kennt das nicht: bestimmte Werte wie HEX-Codes werden seitenübergreifend eingesetzt, müssen aber jedes Mal wieder neu getippt werden. Sind viele verschiedene Farben im Einsatz, ist es zudem oftmals nicht sofort ersichtlich, welches Snippet man jetzt kopieren soll. Abhilfe schaffen da Variablen, welchen man einfach die gewünschten Werte zuteilt. Diese kann man dann an jeder Stelle wiederverwenden.

Beispiel für Variablen (SCSS)

$font-family: 'Roboto', sans-serif;
$font-color: #111;

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

Dieser Code wird umgewandelt in:

body {
   font: 'Roboto', sans-serif;
   color: #111;
}

Nesting

Anders wie bei HTML verfügt CSS über keine Möglichkeit der Verschachtelung. Sass dagegen schon, und dies erspart nicht nur Arbeit, sondern fördert auch die Übersichtlichkeit.

Beispiel für Nesting (SCSS)

.highlight {
   h1 {
      color: yellow;
   }

   a {
      text-decoration: underline;
   }

   p {
      font-weight: bold;
      font-size: 1.5rem;
   }
}

Dieser Code wird umgewandelt in:

.highlight h1 {
   color: yellow;
}

.highlight a {
   text-decoration: underline;
}

.highlight p {
   font-weight: bold;
   font-size: 1.5rem;
}

Import

Zwar bietet CSS bereits eine Import Funktion, jedoch wird dabei lediglich per HTTP eine weitere CSS Datei angefordert. Bei Sass können dagegen mehrere Dateien zu einer einzigen zusammengefügt werden.

Beispiel für Import anhand von style.scss und _font.scss (SCSS)

// style.scss

body {
   background-color: #eee;
}

@import ‘font’;

footer {
   display: block;
}

// _font.scss

h1 {
   font-size: 2rem;
   color: #aaa;
}

Diese beiden getrennten SCSS Dateien werden kombiniert und man erhält folgenden Code:

body {
   background-color: #eee;
}

h1 {
   font-size: 2rem;
   color: #aaa;
}

footer {
   display: block;
}

Es empfiehlt sich bei größeren Projekten mit einer sinnvollen Anzahl solcher Importdateien zu arbeiten, damit die Übersicht erhalten werden kann. Ein weiterer Vorteil ist, dass so einzelne Module auch in einem anderen Projekt verwendet werden können. Es ist zu beachten, dass die Namen der zu importierenden SCSS Dateien mit einem Unterstrich beginnen müssen.

Mixins

Wiederkehrende Funktionen und Vorlagen, Mixins genannt, sind eine weitere nützliche Erweiterung, die euch das Arbeiten mit CSS Dateien erleichtert. Eine einmal erstellte Vorlage lässt sich beliebig oft im gesamten Projekt verwenden.

Beispiel für Mixins (SCSS)

@mixin border-radius($radius) {
   -webkit-border-radius: $radius;
   -moz-border-radius: $radius;
   -ms-border-radius: $radius;
   border-radius: $radius;
}

.button {
   @include border-radius(20px);
}

Dieser Code wird folgendermaßen interpretiert:

.button {
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   -ms-border-radius: 20px;
   border-radius: 20px;
}

Extend / Inheritance

Eine weitere Möglichkeit, überflüssigen Code einzusparen. Bestehende CSS Selektoren werden einfach durch Platzhalter erweitert.

Beispiel für Extend / Inheritance (SCSS)

%meldung {
   border: 2px dotted #000;
   padding: 5px 10px;
   font-weight: 800;
}

.nachricht {
   @extend %meldung;
}

.erfolg {
   @extend %meldung;
   color: green;
}

.error {
   @extend %meldung;
   color: red;
}

.warnung {
   @extend %meldung;
   color: yellow;
}

Dieser Code wird umgewandelt zu:

.nachricht, .erfolg, .error, .warnung {
   border: 2px dotted #000;
   padding: 5px 10px;
   font-weight: 800;
}

.erfolg {
   color: green;
}

.error {
   color: red;
}

.warnung {
   color: yellow;
}

Operators

Hin und wieder ist es in CSS nötig, mathematische Berechnungen anzustellen. Sass bringt dafür die nötigen Operatoren mit.

Beispiel für Operators (SCSS)

.main {
   width: 800px / 960px * 100%;
}

Daraus wird dann:

.main {
   width: 83.33333%;
}

Wie erhalte ich nun meine fertige CSS-Datei?

Hierfür benötigt ihr einen passenden Compiler. Wir verwenden aktuell Prepros für Windows, es gibt allerdings auch noch zahlreiche andere Vertreter wie beispielsweise CodeKit (Mac) und Compass (Windows + Mac).

[Update: seit 2017 gibt es jetzt auch ohne Präprozessor die Möglichkeit Variablen einzusetzen, siehe dazu CSS Custom Properties; wir empfehlen trotzdem weiterhin den Einsatz von Präprozessoren wie Sass oder LESS, da Variablen ja nicht das einzige Feature ist.]