SASS & SCSS – Umfangreiches CSS ganz einfach

CSS ist eine Sprache, die wir alle kennen und lieben, aber es kann schwierig sein, mit den Aktualisierungen Schritt zu halten. SCSS und SASS hingegen bieten einige große Vorteile gegenüber einfachem CSS: Es ist effizienter, leichter zu pflegen und modularisiert Ihren Code.

In diesem Blogbeitrag werden diese Vorteile von SASS und SCSS näher erläutert!

Was ist SASS und was ist SCSS?

SASS steht für Syntactically Awesome Stylesheets was wiederum für eine Meta-Sprache steht die man, wenn sie einmal verstanden und eingesetzt wurde, nicht mehr hergeben will. Im Grunde ist es eine erweiterte Stylesheet-Sprache, die mittles CSS-Präprozessor mit Variablen, Schleifen und viele andere Funktionen ermöglicht, die Cascading Style Sheets (CSS) nicht mitbringen, was die Erstellung von CSS vereinfacht und die Pflege großer Stylesheets erleichtert.

SCSS steht für Sassy-CSS. Dies ist eine Stylesheet-Sprache, mit der Sie Ihre Stile objektorientiert schreiben können.

SCSS und SASS werden häufig verwechselt, allerdings ist SASS an YAML angelehnt, wohingegen SCSS sich erst später daraus entwickelt hat und heute deutlich weiter verbreitet ist. Der Unterschied zwischen SaSS und sCSS ist nicht gross, aber trotzdem wichtig: Die Funktionen sind identisch, wohingegen sich die Syntax unterscheiden. Bei SASS werden keine Klammern und Semikolons geschrieben, bei SCSS hingegen schon. Darum ähnelt SCSS aus mehr dem normalen CSS und ist deutlich übersichtlicher.

Die Verwendung ist sehr einfach. Die Regeln von SASS und SCSS werden anstatt in .css Dateien einfach in .scss bzw. .sass Dateien geschrieben. Aus diesen .scss Dateien werden dann normale .css Dateien generiert.

Vielleicht fragst Du Dich jetzt, was eigentlich die Vorteile von SASS und SCSS im Vergleich zu „regulärem“ CSS sind, damit sich der zusätzliche Aufwand lohnt. Dann lass Dir gesagt sein, dass die Vorteile der Verwendung von SCSS gegenüber einfachem CSS wirklich vielfältig und groß sind!

• Der erste ist, dass er besser lesbar ist als normaler CSS-Code, da er sich wiederholende Zeilen durch Variablen ersetzt und vordefinierte Klassen erweitert.
• Außerdem bietet es eine bessere Organisation, da verwandte Stile zusammen gruppiert werden, was die Pflege Ihrer Website erleichtert.
• Der nächste Vorteil ist, dass Sie Variablen für Dinge wie Farben, Größen usw. verwenden können, was bedeutet, dass Sie sie nicht ständig angeben müssen.
• Der entscheidende Vorteil von SASS ist für viele Entwickler die Übersichtlichkeit, die insbesondere Variablen und Mixins mit sich bringen. Diese verkleinern den selbst geschrieben Code und ermöglichen vor allem eine saubere und einfache Verwaltung.

Installation von SASS

Linux

Die Installation unter Linux, beispielsweise Ubuntu ist nicht schwer:

sudo apt-get install ruby-full build-essential rubygems sass

Ob die Installation unter Linux geklappt hat lässt sich in der Konsole leicht mit einem sass -v testen.

Windows

Um SASS unter Windows verwenden zu können wird Ruby benötigt. Ruby kann man einfach von rubyinstaller.org herunterladen.

Nach der Ruby Installation muss man auch unter Windows in die Konsole wechseln. Die Installation von sass wird dann einfach mit gem install sass angestoßen. Von hier ab sind wieder alle Kommandos gleich.

Features von SASS

Dateien Beobachten

Mit SASS lassen sich die angelegten .scss Dateien beobachten. Sobald eine Änderung in eine Datei gespeichert wird, lassen sich damit direkt auch die geänderten .css Dateien generieren.

Ein kompletter Ordner mit .scss Dateien wird allgemein wie Folgt beobachtet:

sass --watch [pfad/zum/quell/ordner]:[pfad/zum/ziel/ordner]

Nehmen wir an wir möchten alle .scss Dateien in unserem arbeiten/projekt/sass Ordner beobachten und bei Änderungen die .css Dateien in den arbeiten/projekt/css generieren:

sass --watch arbeiten/projekt/sass:arbeiten/projekt/css

Das generierte CSS lässt sich auch direkt mit dem Zusatzparameter --style compressed komprimiert generieren. Komprimierte Dateien verringern die Ladezeit und haben so direkten Einfluss auf die Performance der Webseite.

Der Einfachheit halber gehen wir in unseren Beispielen nur auf die .scss Syntax ein!

Dateien importieren

Sass bietet die Möglichkeit Dateien ganz einfach zu importieren. Dies wird vor allem später bei den Mixins wichtig.

Die Syntax ist denkbar einfach: 

@import "mixins";

Der oben gezeigte Code würde die mixins.scss Datein in die Entsprechende .scss Datei importieren und alle darin bestehenden Variablen oder eben Mixins zur Verfügung stellen.

Über die Importe lassen sich auch gesammelte style.css Dateien generieren.

Eine entsprechende sytle.scss könnte wie folgt aussehen:

@import "header"; @import "sidebar"; @import "content"; @import "footer";

Beim Import wird einfach der Inhalt der zu importierenden Datei an dieser Stelle in die entsprechende Datei kopiert. Die Reihenfolge ist hier also wichtig.

Variablen

Variablen in SASS funktionieren wie in jeder anderen Programmiersprache auch. Ein $-Zeichen dient als Indikator für eine Variable. Mit den zugeordneten Werten können sogar Operationen durchgeführt werden.

$default_blue = #414df0;
$default_margin = 20px;
.box {
  background-color: $default_blue;
  border: 1px solid $default_blue;
  margin-top: $default_margin;
  margin-bottom: $default_margin / 2;
}

Anwendungsmöglichkeiten und die Vorteile liegen hier auf der Hand. Anstatt überall im CSS die gleichen Werte wiederholen zu müssen, kann nun die Variable verwendet werden. Änderungen lassen sich dadurch viele einfacher durchführen.

Nesting

Eines der wichtigsten Features von SASS ist das Nesting. Bei normalen CSS-Regeln werden die unterschiedlichen Identifikatoren der Hierarchie nach hintereinander aufgezählt um ein Element eindeutig zu Identifizieren. Bei SASS werden die Identifikatoren ineinander geschachtelt und ermöglichen damit ein saubereres arbeiten.

#page { /* Code */ }
#page .wrapper { /* Code */ }
#page .wrapper .list { /* Code */ }
#page .wrapper .list .item { /* Code */ }
#page .wrapper .list .item a { color: #CCCCCC; text-decoration: none; font-weight: bold; font-size: 20px; }
#page .wrapper .list .item a:hover { color: #888888; } 
/* 271 Zeichen */

#page {
  /* Code */ 
  .wrapper {
    /* Code */ 
    .list {
      /* Code */ 
      .item {
        /* Code */
        a { color: #CCCCCC; text-decoration: none; font: { weight: bold; size: 20px; } &:hover { color: #888888; }
        }
      }
    }
  }
}
/* 172 Zeichen */ 

Wie aus dem Beispiel ersichtlich lassen sich auch Metaklassen wie :hover direkt mit einem vorangestellten & verschachteln. Hinter dem & können auch zusätzliche Klassen wie &.active stehen.

Per Doppelpunkt lassen sich auch einzelne Eigenschaften verschachteln wie hier beim font-weight und font-size geschehen.

Bereits in diesem kurzen Beispiel konnten wir mit der Verschachtelung von SASS ca. 100 Zeichen sparen.

Mixins

Mixins dienen der Vereinfachung von sich wiederholendem Code. Einmal generierte Mixins lassen sich über ein @include überall im Code anwenden. Der Vorteil beim Einpflegen von Änderungen und Updates liegt hier direkt auf der Hand.

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}
.box {
  @include border-radius(4px);
}

Auch hier wird ziemlich schnell klar warum das Mixin einen riesigen Vorteil zum normalen CSS bietet. Während ohne SASS bei jedem Element mit Border-Radius wieder alle drei Zeilen gesondert eingegeben und gepflegt werden müssten (Änderung von 4 auf 5 Pixel gefällig?), lässt sich die Eingabe per Mixin auf nur eine Zeile reduzieren.

Einmal geschriebene Mixins lassen sich natürlich über mehrere Projekte hinweg verwenden. Ein gutes Vorgehen ist hier, eine eigene mixins.scss anzulegen und diese beim erstellen von neuen .scss Dateien direkt immer zu importieren. Da mixins kein CSS generieren ist das Problemlos und führt nicht zu dupliziertem Code.

Auf Github lassen sich außerdem schon einige gute Mixin Bibliotheken finden die einen Großteil der benötigen Mixins abdecken.

Funktionen

SASS bringt einige hilfreiche Funktionen mit die hier eingesehen werden können.

$link_color: #CCCCCC; .box { a { color: $link_color; &:hover { color: darken($link_color, 10%); } } }

Im Angegebenen Beispiel wird die darken($color, $amount)-Funktion verwendet um einen Link beim Hover um 10% abzudunkeln.

Fazit

Wer einmal mit SASS angefangen hat möchte nicht mehr zurück zu normalem CSS gehen. Warum sollte man auch, SASS bietet so viele Möglichkeiten das Arbeiten mit CSS sauberer, einfacher und schneller zu machen. Zurück zu normalen CSS zu gehen wäre einfach nur vorsätzliche Zeitverschwendung.

Weitere Informationen und eine ausführliche Übersicht über alle SASS Funktionen finden sich in der offiziellen SASS Dokumentation.