Sass – eine kurze Einführung

Was ist Sass?

Das Akronym Sass steht für Syntactically Awesome StyleSheets.

Sass ist eine Erweiterung von CSS bzw. ein Preprocessor, der Dateien im Sass-Format in CSS-Dateien umwandelt. Gegenüber reinem CSS können in Sass Variablen und mathematische Operationen verwendet werden. Darüber hinaus können andere Dateien oder auch vordefinierte CSS-Fragmente, sogenannte Mixins eingebunden werden.

An einem kleinen Beispiel möchte ich in diesem Artikel die wesentlichen Grundfunktionen von Sass vorstellen. Am Ende des Artikels habe ich noch ein paar weiterführende Links zum Thema aufgeführt.

Installation

Zu allererst muss der Sass-Preprocessor installiert werden. In meinem Beispiel verwende ich die Ruby-Version auf meinem Mac. Hier ist Ruby bereits vorinstalliert, sodass wir mit dem folgenden Befehl Sass ganz einfach installieren können:

$ gem install sass
Successfully installed sass-3.4.22 
$ sass --version
Sass 3.4.22 (Selective Steve)
$

Nun können wir Sass in der aktuellen Version verwenden.

Projektstruktur unseres Beispiels

Wir erstellen uns eine einfache Projektstruktur mit den zwei Dateien index.html und style.scss.

sass-in-a-nutshell
.. index.hmtl
.. css
.. scss
.... style.scss

HTML5 normalisieren

Als Nächstes laden wir uns nun von der Seite http://necolas.github.io/ eine weitere Datei mit dem Namen normalize.css herunter, um diese in unser Projekt einzubinden. Diese Datei speichern wir im Verzeichnis scss unter dem Namen _normalize.scss und binden diese Datei in unser Projektstylesheet style.scss ein:

@import "normalize";

Mit der @import Anweisung bewirken wir, dass der Inhalt der Datei _normalize.scss in unser Stylesheet integriert wird. Dateien, die mit einem Unterstrich beginnen werden als partials bezeichnet. Mit diesem Konstrukt kann ein Projekt auf einfache Art und Weise modularisiert werden.

index.html

Für unser kleines Beispiel erstellen wir nun eine HTML5-Datei mit zwei Sektionen und verschiedenen Artikeln darin. Für jede Sektion definieren wir einen eigenen Stil.

Die Datei index.html sieht aus wie folgt:

<!-- <!DOCTYPE html> -->
<!DOCTYPE html>
<html>
 <head>
  <link rel="stylesheet" media="all" href="./css/style.css" />
 </head>
 <body>
  <div class="wrap">
   <section class="first-section">
    <h1>1. Abschnitt</h1>
    <article id="first-first">
     <h1>Erster Artikel</h1>
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
    </article>
    <article id="first-second">
     <h1>Zweiter Artikel</h1>
     <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum ...</p>
    </article>
   </section>
   <section class="second-section">
    <h1>2. Abschnitt</h1>
    <article id="second-first">
     <h1>Dritter Artikel</h1>
     <p>Excepteur sint occaecat cupidatat non proident, ...</p>
    </article>
   </section>
  </div>
 </body>
</html>

Es fällt auf, dass wir nicht die Datei style.scss in unsere Seite einbinden, sondern eine reguläre Datei style.css, obwohl diese Datei gar nicht existiert. Genau hierfür nutzen wir den Sass-Präprozessor, um aus einer oder mehreren scss-Dateien eine CSS-Datei zu generieren.

Doch zunächst zu dem Inhalt der Datei style.css.

style.scss

Diese Datei ist unsere Sass-Quelldatei, aus der wir die CSS-Datei style.css erstellen wollen.

Die einzelnen Fragmente der Datei sind anhand von Kommentaren erläutert. Kommentare, die der regulären CSS-Syntax /* */ entsprechen, bleiben beim Generieren in der CSS-Datei erhalten. Kommentare in JavaScript-Syntax mit zwei // am Anfang einer Zeile dienen nur der Dokumentation der scss-Datei und werden nicht in die CSS-Datei übernommen.

// Variablendefinition
// Diese können anschließend an allen Stellen oder 
// in den importierten Dateien genutzt werden, 
// wenn die import-Anweisung nach der Variablendefinition erfolgt.
$wrapping:40px;
$color_first:#555;
$color_second:blue;

// Import der Datei "_normalize.scss" zur HTML5-Initialisierung
@import "normalize";

// Styledefinition für umgebenden Container
.wrap {
 padding:$wrapping;
}

// Styledefinition für den ersten Abschnitt
// Die Definitionen können wie HTML geschachtelt werden, um eine 
// deutlich bessere Lesbarkeit zu erreichen.
.first-section { 
 h1 {
  font-size:3em;
  color:$color_first;
 } 
 article {
  h1 {
   font-size:2em;
   // Die Überschriften der Artikel sollen um 20% heller erscheinen
   color:lighten($color_first, 20%);
  }
 }
} 

// Styledefinition für den ersten Abschnitt
.second-section { 
 h1 {
  font-size:3em;
  color:$color_second
 } 
 article {
  h1 {
   font-size:2em;
   color:$color_second;
   // Die Überschriften der Artikel sollen um 20% dunkler erscheinen
   color:darken($color_second, 20%);
  }
 }
}

Eine ausführliche Dokumentation aller verwendbaren Funktionen etc. findet man auf der offiziellen Sass-Seite.

CSS-Generierung

Nun wollen wir aus den scss-Dateien unsere CSS-Datei style.css generieren. Hierfür nutzen wir das folgende Kommando in der Kommandozeile. Dies erstellt aus der Datei style.scss im aktuellen Verzeichnis die Datei style.css in dem Verzeichnis ../css:

$ sass –style expanded style.scss ../css/style.css

Es können hier unterschiedliche Ausgabeformate angegeben werden.
Zwei gängige Formate:

  • expanded: CSS wird in lesbarer Form inkl. Einrückungen etc. erstellt
  • compressed: Das CSS-Datei wird in einer komprimierten Form ausgegeben.

Sehen wir uns nun das Ergebnis der Generierung für einen Ausschnitt der Datei an.

...
.wrap {
 padding: 40px;
}

.first-section h1 {
 font-size: 3em;
 color: #555;
}
.first-section article h1 {
 font-size: 2em;
 color: #888888;
}

.second-section h1 {
 font-size: 3em;
 color: blue;
}
.second-section article h1 {
 font-size: 2em;
 color: blue;
 color: #000099;
}

Die Variablen wurden durch die angegeben bzw. berechneten Werte ersetzt und die geschachtelte Struktur wurde in die reguläre CSS-Syntax überführt.

In komprimierter Form sähe das CSS so aus:

...
.wrap{padding:40px}.first-section h1{font-size:3em;color:#555}.first-section article h1{font-size:2em;color:#888}.second-section h1{font-size:3em;color:blue}.second-section article h1{font-size:2em;color:blue;color:#009}

Automatische Generierung

Sass bietet auch einen Beobachtungsmodus (sass --watch), der Änderungen an den beteiligten SCSS-Dateien erkennt und automatisch die Generierung anstößt. Zum Starten dieses Modus verwenden wir folgenden Befehl in der Kommandozeile: sass --watch <scss-Verzeichnis>:<css-Verzeichnis>. In unserem Beispiel sieht das dann so aus, wenn wir dieses Kommando aus dem Projektstammverzeichnis starten:

$ sass --watch scss:css
>>> Sass is watching for changes. Press Ctrl-C to stop.

Das Ergebnis

Und so sieht das Ergebnis aus.

Index.html

Index.html

Weiterführende Links

Click Here to Leave a Comment Below