Das große SASS-Tutorial: Das müssen Sie wissen!
Wenn Sie bereits Websites erstellt haben, kennen Sie sich vermutlich mit CSS aus. Vielleicht haben Sie bei der Arbeit mit der Stylesheet-Sprache einige Features vermisst. Websites mit CSS zu designen, kann sehr mühselig werden, weshalb viele Entwickler inzwischen auf SASS setzen. Hinter dem Akronym steht ein Versprechen: Syntactically Awesome Stylesheets. SASS ist ein Präprozessor und eine Stylesheet-Sprache zugleich.
Dass es sich um einen Präprozessor handelt, liegt an der Notwendigkeit zur Umwandlung. Bevor SASS ausgespielt werden kann, muss der Quelltext in gewöhnliches CSS kompiliert werden. Auch wie dieser Schritt funktioniert, erklären wir im ausführlichen SASS-Tutorial. Damit Sie SASS einfach lernen können, gehen wir Schritt für Schritt vor und erklären alles anhand von Beispielen.
In unserem Überblicksartikel erhalten Sie weitere Informationen über SASS.
Anforderungen für SASS
SASS ist prinzipiell plattformunabhängig. Sie können also sowohl auf PC als auch auf Mac oder Linux damit arbeiten. SASS basiert – zumindest in der ursprünglichen Version – auf Ruby. Deshalb müssen Sie die Programmiersprache in Ihrem System integriert haben. In macOS sollte Ruby bereits vorinstalliert sein. Für Windows-PCs können Sie den RubyInstaller verwenden. Das Installationspaket enthält sowohl die Sprache als auch eine Entwicklungsumgebung (die Sie allerdings für SASS nicht brauchen) und eine Dokumentation. Auch für Linux-Distributionen ist die Installation nicht schwierig.
Auch für andere Systeme gibt es praktische Installationspakete. Eine Liste finden Sie auf der offiziellen Seite von Ruby.
SASS installieren
Es gibt mehrere Methoden, wie Sie SASS auf Ihr System bringen. So haben sich inzwischen einige Anwendungen etabliert, die Ihnen die Arbeit mit der Stylesheet-Sprache erleichtern. Teilweise kosten diese Gebühren, manche wie Koala oder Scout-App sind allerdings kostenfrei verfügbar und Open Source. Prinzipiell brauchen Sie aber gar kein zusätzliches Programm, um SASS auf Ihrem System nutzen zu können. Ruby enthält den Paketmanager gem, mit dem sich die Stylesheet-Sprache ganz einfach über einen Kommandozeilenbefehl implementieren lässt. Dafür öffnet man das Terminal bzw. die Eingabeaufforderung und gibt folgenden Befehl ein:
gem install sassDies sollte schon genügen. Falls Sie eine Fehlermeldung erhalten, kann es sein, dass Sie nicht über die benötigten Rechte zur Installation verfügen. Dies können Sie beheben, indem Sie mit dem sudo-Befehl arbeiten (macOS, Linux) oder die Eingabeaufforderung über die rechte Maustaste als Administrator starten (Windows). Um zu überprüfen, ob die Installation erfolgreich war und auch auf dem neuesten Stand ist, fragen Sie SASS nach der installierten Version:
sass -vZusätzlich zur Installation sollten Sie aber auch schon die Kompilierung einrichten. Damit Ihr SASS-Code auch auf einer Website funktioniert, muss dieser zunächst zu CSS umgewandelt werden. Auch hierfür gibt es wieder verschiedene Wege: Wenn Sie sich für eines der Programme entschieden haben, um SASS zu installieren, können Sie die Kompilierung auch damit durchführen. Falls Sie mit den Task-Runnern Grunt oder Gulp arbeiten, übernehmen diese die Arbeit für Sie, sobald Sie sie einmal eingerichtet haben. Sogar für einige Texteditoren gibt es Plug-ins, die die Kompilierung übernehmen. Aber auch den Schritt der Umwandlung können Sie einfach über die Kommandozeile erledigen.
SASS gibt Nutzern die Optionen, entweder nach jeder Änderung im Quelltext die Kompilierung erneut durchzuführen oder aber einen Überwachungsmodus einzuschalten. Bei letzterem überprüft der Compiler entweder eine Datei oder einen ganzen Ordner und führt die Umwandlung automatisch durch. Für die Überwachung navigieren Sie über die Kommandozeile in den Ordner Ihres Website-Projekts und starten einen der beiden Befehle:
sass --watch beispiel.sass:beispiel.cssHiermit überwachen Sie die Datei beispiel.sass und kompilieren den Quelltext in die Datei beispiel.css. Wenn Sie in Ihrem Projektordner noch zwei Unterordner hinzufügen – einen für SASS-Dateien einen weiteren für CSS-Dateien – und diese entsprechend sass und css nennen, können Sie den gesamten Ordner überwachen lassen:
sass --watch sass:cssSobald Sie nun eine Änderung in den SASS-Dateien vornehmen und diese speichern, überschreibt der Compiler selbstständig die vorhandenen CSS-Dateien mit den neueren Versionen.
Zur Anzeige dieses Videos sind Cookies von Drittanbietern erforderlich. Ihre Cookie-Einstellungen können Sie hier aufrufen und ändern. Eventuell möchten Sie mit Ihrem bestehenden Website-Projekt, das Sie noch traditionell in CSS verfasst haben, zu SASS umziehen. Dafür müssen Sie auch Ihren alten CSS-Code umwandeln. Hierfür sollten Sie sich aber zuvor überlegen, ob Sie in der ursprünglichen SASS-Syntax arbeiten möchten (kurz: SASS) oder die neuere SCSS-Variante wählen (im IONOS Digital Guide lesen Sie mehr zu den Unterschieden zwischen SASS und SCSS; in diesem SASS-Tutorial werden wir immer beide Formen vorstellen). Auch für die Umwandlungen gibt es entsprechende Befehle:
sass-convert beispiel.css beispiel.sass
sass-convert beispiel.css beispiel.scssDie entsprechenden Formate liest der Converter aus den Dateiendungen ab. Alternativ können Sie eine nützliche, simple Internetseite verwenden: Beim CSS 2 SASS/SCSS Converter geben Sie Ihren CSS-Code in der linken Seite des Fensters ein und lassen sich den umgewandelten Quelltext auf der rechten Seite im gewünschten Format anzeigen. Nun brauchen Sie den Code nur noch in eine Datei zu kopieren. Wenn Sie sich entscheiden, SCSS zu verwenden, ist die Konvertierung optional: Benennen Sie Ihre Dateien um – statt .css schreiben Sie einfach .scss. Jeglicher Code, den man mit CSS-Regeln verfasst hat, funktioniert auch unter SCSS.
SASS: Die Syntax der Stylesheet-Sprache
Wie bereits erwähnt, gibt es unter SASS nicht nur eine Syntax. Inzwischen haben sich zwei konkurrierende Formate etabliert. Ursprünglich basierte SASS auf der heute als „indented syntax“ bekannten Syntax, bei der Einrückungen eine Verschachtelung auslösen und ein Zeilenumbruch eine Codezeile wirkungsvoll beendet. SCSS hingegen orientiert sich stärker an dem Format, das man von CSS kennt und benötigt daher geschweifte Klammern und Semikolons. Damit Sie – egal für welche Syntax Sie sich entscheiden – dieses SASS-Tutorial in die Praxis umsetzen können, stellen wir die Vorgehensweise immer in beiden Formaten vor. Schritt für Schritt gehen wir nun auf die Eigenheiten von SASS ein.
Wenn Sie die Stylesheet-Sprache zunächst nur ausprobieren wollen, können Sie das auch direkt im Browser. Mit dem Sass.js Playground oder dem Angebot von SassMeister geben Sie Ihren Code online ein und erzeugen direkt den entsprechenden Quelltext in CSS.
Variablen
Die meisten Webentwickler schätzen die Verwendung von Variablen in SASS. Mit dieser nützlichen Funktion können Sie Information unter einem Alias abspeichern und an gewünschten Stellen wieder einsetzen. Sehr beliebt sind Variablen z. B. im Kontext von Farben und Größenangaben. Unter einer Variablen kann man so den Hexwert einer Farbe speichern oder eine festgelegte Größe mithilfe von mathematischen Funktionen anpassen. Variablen werden in SASS mit einem Dollarzeichen ($) eingeleitet:
SASS
$bg-color: #df0174
$size: 1emSCSS
$bg-color: #df0174;
$size: 1em;Anschließend müssen Sie die Variablen nur an den entsprechenden Stellen im Code einfügen:
SASS
$bg-color: #df0174
$size: 1em
body
background-color: $bg-color
margin: $size * 2SCSS
$bg-color: #df0174;
$size: 1em;
body {
background-color: $bg-color;
margin: $size * 2;
}Beim Kompilieren passt der Compiler die Syntax schließlich wieder an CSS an und löst die Variablen auf:
CSS
body {
background-color: #df0174;
margin: 2em;
}Bei der Benennung von Farbwerten in Form von Variablen haben sich zwei unterschiedliche Prinzipien etabliert. Manche Entwickler finden es praktisch, die Farbe direkt zu benennen ($pink), andere geben lieber an, welchem Zweck sie dienen soll ($bg-color). Prinzipiell können Sie die Namen der Variablen aber frei wählen.
Es kann sinnvoll sein, für bestimmte Variablen einen voreingestellten Wert anzugeben. Wenn nicht anders definiert, greift SASS auf diese Information zu. Das bedeutetet im Umkehrschluss: Sobald man die Variable anders definiert, wird die voreingestellte Information ignoriert. Dies kann z. B. sinnvoll sein, wenn man als Entwickler ein nicht komplett fertiges Produkt an einen Klienten weitergibt, der noch Änderungen vornehmen möchte, oder man als Webdesigner ein eigenes Template verwendet. Man erreicht eine solche Voreinstellung, indem man ein !default-Flag setzt. Sie können sowohl normale Werte als auch bereits definierte Variablen eintragen:
SASS
$text-color: #000000 !default
$background-color: $bg-color !defaultSCSS
$text-color: #000000 !default;
$background-color: $bg-color !default;Importieren
SASS besitzt eine praktische Direktive, die es Ihnen ermöglicht, andere Dateien in das Stylesheet einzubinden. Sie erstellen beispielsweise eine Datei, in der Sie alle Variablen definieren (hier können Sie z. B. alle benötigten Farbwerte festlegen und benennen) und importieren die Datei dann. Anschließend verwenden Sie die Informationen aus der importierten Datei einfach so, als würden Sie im aktuellen Quellcode stehen. Damit halten Sie Ihre Stylesheets übersichtlicher. Man importiert beliebig viele Dateien mithilfe von @import – auch aus Unterverzeichnissen. Die Funktion kommt sogar damit klar, wenn Sie mehrere Dateien in einem Schritt importieren:
SASS
@import "variables"
@import "partials/styles"
@import "partials/test-a", "partials/test-b"SCSS
@import "variables";
@import "partials/styles";
@import "partials/test-a", "partials/test-b";Wenn Sie .sass- oder .scss-Dateien einbinden möchten, brauchen Sie keine Dateiendung anzugeben; das System geht automatisch davon aus, dass Sie solche Dateitypen meinen. Es steht Ihnen aber auch frei, CSS-Dateien einzubinden. Hierbei geben Sie aber auch die Endung mit an, damit der Computer weiß, was genau gemeint ist. Beim Kompilieren wird auch diese Vereinfachung wieder aufgelöst: Der finale CSS-Code enthält nicht mehr die Direktive, sondern nur die Informationen aus den entsprechenden Dateien.
Partials
Was Sie häufiger bei der Arbeit mit SASS importieren werden, sind sogenannte Partials. Dabei handelt es sich um Code-Fragmente. Mit diesen erstellen Sie Module, die Sie immer wieder einfach einbauen können. Wenn Sie die Datei benennen, ist es wichtig, dem eigentlichen Namen einen Unterstrich voranzustellen. Dieser informiert den Compiler, dass die entsprechende Datei kein Pendant in CSS benötigt. Ansonsten würde das System bei entsprechender Überwachung alle SASS-Dateien in CSS umwandeln.
Wenn Sie die Partials importieren, lassen Sie den Unterstrich weg. SASS weiß auch so, welche Datei Sie meinen. Deshalb ist es aber notwendig, dass Sie keine gleichlautenden Dateien kreieren – einmal mit, einmal ohne Strich. Wenn Sie sowohl beispiel.sass als auch _beispiel.sass haben, wird dies zu einem Fehler führen. Das gilt übrigens auch für die Dateiendungen: beispiel.sass und beispiel.scss sollten deshalb nicht im gleichen Verzeichnis liegen.
Mixins
Eine weitere wichtige Direktive sind Mixins. Dabei handelt es sich um festgelegte Regeln, die man immer wieder im Stylesheet aufrufen kann, ohne den kompletten Code erneut einzufügen. Das hilft dabei, schneller zu arbeiten und den Code schlanker zu halten. Alles, was in SASS erlaubt ist, kann in einem Mixin enthalten sein – Regeln, Parameter oder Funktionen. Auch wenn der Platz im Mixin nicht begrenzt ist, sollte man nicht mehr als zwanzig Zeilen darin unterbringen. Ziel ist es schließlich, die Einfachheit zu steigern, statt alles nur komplizierter zu machen.
Um erfolgreich mit Mixins umgehen zu können, braucht man nur zwei Direktiven: @mixin und @include. Mit dem erstem erstellt man die Vorlage, mit zweitem bindet man den Code-Block ein:
SASS
@mixin big-blue-text
font-family: Arial
font-size: 25px
font-weight: bold
color:#0000ffSCSS
@mixin big-blue-text {
font-family: Arial;
font-size: 25px;
font-weight: bold;
color:#0000ff;
}
}Beim Erstellen des Mixins geben Sie der Vorlage einen Namen (z. B. hidden). Mit diesem binden Sie den Code-Block auch an den gewünschten Stellen wieder ein.
SASS
@include big-blue-textSCSS
@include big-blue-text;Im finalen CSS-Code erscheint nun statt des Mixins der komplette Quelltextblock. Die Festlegung des Mixins selbst (@mixin) taucht dort deshalb auch nicht mehr auf.
Zur Anzeige dieses Videos sind Cookies von Drittanbietern erforderlich. Ihre Cookie-Einstellungen können Sie hier aufrufen und ändern. Extend
Mit der Extend-Regel sparen Sie sich jede Menge Arbeit. Die Direktive sorgt dafür, dass alle Eigenschaften einer Klasse auf die einer anderen übergehen sollen. Um nicht alles erneut zu definieren, greifen Sie zu @extend. Die Direktive funktioniert auch als Kette. Eine durch @extend definierte Klasse kann wiederum Teil einer dritten Klasse sein:
SASS
.button-scope
margin: 5px
border-radius: 2px
.home-button
@extend .button-scope
background-color: $black
.back-button
@extend .home-buttonSCSS
.button-scope {
margin: 5px;
border-radius: 2px;
}
.home-button {
@extend .button-scope;
background-color: $black;
}
.back-button {
@extend .home-button;
}Der Compiler löst den Code folgendermaßen auf:
CSS
.button-scope, .home-button, .back-button {
margin: 5px;
border-radius: 2px;
}
.home-button, .back-button {
background-color: #000000;
}In manchen Situationen legen Sie das Aussehen für eine Klasse fest, die Sie gar nicht auf der eigentlichen Website einsetzen möchten, sondern nur in Form von @extend verwenden. Dieser Fall tritt vor allem dann ein, wenn Sie eine eigene Bibliothek bauen. Für solche Situationen bietet SASS Placeholder-Selektoren an. Mit einem Prozentzeichen (%) kennzeichnen Sie eine Klasse, die Sie nur zu dem Zweck erstellen, Sie in anderen Klassen zu verwenden. Wenn Sie einen solchen bestehenden Selektor dann beim Gestalten der Website nicht importieren, wird SASS diesen auch nicht ins CSS kompilieren:
SASS
%module
margin: 20px
padding: 10px
color: $bg-color
.post
@extend %module
color: $greySCSS
%module {
margin: 20px;
padding: 10px;
color: $bg-color;
}
.post {
@extend %module;
color: $grey;
}Im finalen CSS-Code taucht die Klasse module gar nicht mehr auf. Deren Eigenschaften werden direkt an die Klasse post übergeben.
CSS
.post {
margin: 20px;
padding: 10px;
color: …;
}
.post {
color: #D3D3D3;
}Sehr hilfreich bei Extend kann auch das !optional-Flag sein: Wenn Sie eine Extension von einer Klasse schreiben, die gar nicht existiert, wird SASS beim Kompilieren einen Fehler generieren. Mit !optional umgehen Sie dies. SASS wird den Befehl einfach ignorieren, falls es keine passende Klasse findet.
Die Wirkungsweise von Mixins und @extend ähneln sich stark, und in den meisten Fällen ist es sinnvoller, auf Mixins zu setzen. Einen ausführlichen (englischen) Artikel über die Unterschiede finden Sie auf csswizardry.com.
Nesting
In HTML ist es selbstverständlich, dass man den Code in einer hierarchischen Baumstruktur untergliedert. CSS ignoriert diese Funktion und nötigt den Nutzer dazu, Eigenschaften immer und immer wieder zu deklarieren. SASS bringt die Möglichkeit des Nestings zurück in die Stylesheets, indem die Sprache es zulässt, dass Unterkategorien die Eigenschaften der Oberkategorie erben. Auch dies sorgt wieder dafür, dass der Code insgesamt schlanker bleibt und die Arbeit beim Schreiben und Warten geringer ausfällt. So ist es z. B. möglich, das Aussehen von Links zu definieren und innerhalb des Nestings festzulegen, wie diese Links beim Hovern – oder wenn sie bereits besucht wurden –aussehen.
Wenn man Nesting im Code einsetzt, verwendet man das kaufmännische Und (&) – auch „ampersand“ genannt –, um einen Teil des Selektors mit dem übergeordneten zu ersetzen.
SASS
a
color: $blue
&:visited
color: $red
&:hover
color: $purpleSCSS
a {
color: $blue;
&:visited {
color: $red;
}
&:hover {
color: $purple;
}
}Bei der Kompilierung muss die Verschachtelung wieder aufgelöst werden. Im CSS taucht jeder Zustand gesondert definiert wieder auf.
CSS
a {
color: #0000FF;
}
a:visited {
color: #FF0000;
}
a:hover {
color: #551A8B;
}Neben der Auflösung des Nestings sorgt die Kompilierung natürlich auch dafür, dass aus den Variablen (deren Definition wir im Beispiel ausgelassen haben) wieder Hexwerte werden.
Nesting ist ein sehr hilfreiches Mittel, um den Quelltext des Stylesheets schlank und effizient zu halten. Man neigt aber leicht dazu, diese Möglichkeit der Verschachtelung zu stark auszunutzen und so den eigentlichen Effekt umzukehren und ein kompliziertes Gliederungssystem aufzubauen. Gerade bei Änderungen und Wartungen können so Probleme entstehen. Deshalb sollte man von Gliederungen ab der dritten Ebene absehen.
Durch Nesting können Sie auch sogenannte Properties weitergeben. CSS kennt einige Eigenschaften, die der gleichen Familie angehören. So gehören z. B. alle Angaben zur Schriftformatierung der gleichen Familie (font) an, müssen aber in CSS jeweils als einzelne Punkte definiert werden – mit ihren kompletten Property-Namen. SASS gibt Ihnen die Möglichkeit, die einzelnen Eigenschaften unter den Familiennamen zu gliedern.
SASS
.example
font:
family: serif
style: normal
size: mediumSCSS
.example {
font: {
family: serif;
style: normal;
size: medium;
}
}Funktionen
SASS kennt zahlreiche Funktionen, die Ihnen die Arbeit im Stylesheet erleichtern. Dabei handelt es sich um vorgefertigte Arbeitsabläufe, die Sie ansonsten per Hand durchführen müssten. Die Funktionen lassen sich verschiedenen Kategorien zuordnen:
- Farben: Mit diesen Funktionen können Sie Farbwerte, Sättigung, Transparenz und viele weitere Eigenschaften anpassen. So können Sie z. B. mit mix() aus zwei Farben eine neue mischen.
- Listen: Bei Listen (Reihen von CSS-Eigenschaftswerten) können Sie mithilfe von Funktionen z. B. die Anzahl der Einträge auslesen oder mehrere Listen zu einer zusammenführen.
- Strings: Bei Strings handelt es sich um feste Zeichenfolgen, wie man sie etwa in Texten verwendet. Funktionen aus diesem Gebiet setzen z. B. eine Zeichenfolge automatisch in Anführungszeichen oder einen kompletten Text in Großbuchstaben.
- Selectors: Mit Funktionen dieser Kategorie manipulieren Sie komplette Selektoren. So haben Sie beispielsweise mit selector-unify() die Möglichkeit, aus zwei Selektoren einen zu machen. Das spart Ihnen u. U. sehr viel Schreibarbeit.
- Zahlen: Rund um das Thema Zahlen, Werte oder Einheiten finden Sie Funktionen, die z. B. auf- und abrunden können, die größte Zahl einer Menge heraussuchen oder eine Zufallszahl ausgeben.
- Maps: Maps sind bei SASS Datenstrukturen aus Schlüsseln und Eigenschaften. Die entsprechenden Funktionen manipulieren die Sammlungen. Sie können z. B. zwei Maps zusammenfügen oder einen spezifischen Key aus einer Map löschen.
- Introspection: Funktionen aus diesem Bereich bieten Einsicht in den Inhalt des kompletten Stylesheets. Sie überprüfen etwa, ob ein bestimmtes Feature, Mixin oder eine spezifische Funktion in Ihrem Code existiert.
- Verschiedenes: Unter dem Punkt „Miscellaneous“ fasst SASS auch die hilfreiche if()-Funktion. Diese ist nicht zu verwechseln mit der gleichnamigen Direktive. Auf den Unterschied gehen wir unten im Punkt „Verzweigung“ ein.
Eine komplette Liste der SASS-Funktionen, die bereits im Installationspaket verankert sind, gibt es in der offiziellen Dokumentation der Stylesheet-Sprache. Dort finden Sie auch zu jeder Funktion eine kleine Erklärung.
Sie fügen Funktionen immer nach dem gleichen Muster in Ihren Code ein: Jede Funktion besitzt einen individuellen Namen und enthält in Klammern bestimmte Parameter, die durch Kommas voneinander getrennt werden. Am Ende gibt die Funktion einen einzelnen Wert aus. Am Beispiel der einfachen, aber sehr nützlichen Funktion mix() erklären wir die SASS-Syntax:
SASS
$color-1: #ffff00
$color-2: #0000ff
body
background-color: mix($color-1, $color-2, 30%)SCSS
$color-1: #ffff00;
$color-2: #0000ff;
body {
background-color: mix($color-1, $color-2, 30%);
}In dieser Funktion vermischen Sie die beiden Farbwerte, die Sie zuvor in Variablen festgelegt haben (Sie müssen die Farbwerte allerdings nicht zwingend zuvor in Variablen speichern; es steht Ihnen frei, die Hex-Werte direkt in der Funktion unterzubringen). Als dritten Parameter geben Sie an, wie das Mischverhältnis sein soll: In unserem Beispiel fließen 30 Prozent von $color-1 in das Endresultat ein. Wenn Sie den letzten Parameter leer lassen, geht SASS von einer 50/50-Mischung aus. Im CSS selbst erscheint nur noch ein einzelner Wert – der Hex-Wert der resultierenden Farbe:
CSS
Die bisher angesprochenen Funktionen befinden sich allesamt bereits im Auslieferungszustand von SASS. Die Stylesheet-Sprache gibt Ihnen aber auch die Möglichkeit, eigene Funktionen für ein Projekt zu definieren. So können Sie häufig auftretende Arbeitsschritte leichter und schneller erledigen. Damit ähneln Funktionen Mixins. Während letztere aber Codezeilen als Output haben, liefern Funktionen nur einen Wert. Sie erstellen Funktionen mit der entsprechenden Direktive @function. Tatsächlich erzeugen Sie eine Funktion aber immer mit einem Direktiven-Paar. Neben dem initialen @function ist ein eingegliedertes @return notwendig, mit dem Sie den Output-Wert definieren:
SASS
$column-count: 12
@function column-width($num)
@return $num * 100% / $column-count
.three-columns
width: column-width(3)SCSS
$column-count: 12;
@function column-width($num) {
@return $num * 100% / $column-count;
}
.three-columns {
width: column-width(3);Mit dieser beispielhaften Funktion führen wir eine einfache Berechnung für die Spaltenbreite für ein Layout-Gitter durch. Wir nehmen zunächst 12 Spalten an. Im nächsten Schritt benennen Sie die Funktion und legen fest, wie viele Parameter diese enthält – in unserem Beispiel eine Zahl. Weiterhin legen wir fest, was die Funktion machen soll und damit auch, welchen Wert sie ausgibt. In diesem Fall multipliziert column-width die Zahl, die man als Parameter eingibt, mit 100 Prozent und dividiert das Ergebnis durch die Spaltenanzahl. Hat man die Funktion einmal definiert, kann man diese immer wieder mit wechselnden Parametern einsetzen. Im finalen CSS findet nur der resultierende Wert Platz:
CSS
.three-columns {
width: 25%;
}Beim Erstellen von Funktionen können Sie in den Namen entweder Binde- oder Unterstriche verwenden. Wenn Sie die Funktion später aufrufen, ist die Unterscheidung egal. Sowohl function-name als auch function_name rufen die gleiche Funktion auf.
Zur Anzeige dieses Videos sind Cookies von Drittanbietern erforderlich. Ihre Cookie-Einstellungen können Sie hier aufrufen und ändern. Schleifen
Loops geben der Stylesheet-Sprache den Anklang einer richtigen Programmiersprache. Mit Schleifen erstellen Sie in SASS Anweisungsblöcke, die solange wiederholt werden, bis eine von Ihnen spezifizierte Bedingung eintritt. Um Schleifen zu erzeugen, stehen Ihnen drei verschiedene Direktiven zur Verfügung:
- @for
- @while
- @each
Die @for-Schleife ist der Standardfall eines Loops im Kontext der Programmierung. Die Schleife beginnt am Start und wiederholt den Auftrag so lang, bis ein Ausstiegszustand erreicht ist und damit das Ende erreicht wird. In SASS kommt diese Direktive in zwei verschiedenen Varianten vor: Entweder der letzte Zyklus wird beim Erreichen des Ziels noch einmal durchlaufen oder die Schleife wird schon vorher verlassen.
SASS
@for $i from 1 through 4
.width-#{$i}
width: 10em + $i
@for $i from 1 to 4
.height-#{$i}
height: 25em * $iSCSS
@for $i from 1 through 4 {
.width-#{$i} { width: 10em + $i; }
}
@for $i from 1 to 4 {
.height-#{$i} { height: 25em * $i; }
}Sie geben nach der Direktive zunächst eine beliebige Variable ($i) an und definieren dann den Start- (1) und den Zielpunkt (4). Mit through geben Sie an, dass auch die vierte Wiederholung durchgeführt werden soll, während die Schleife bei to nach dem dritten Durchlauf stoppt. Wenn Sie für den Startwert einen höheren Wert als den Endwert angeben, zählt SASS rückwärts. Im Loop eingegliedert haben Sie zwei Elemente: Als erstes wird die Bezeichnung im CSS gewählt, die durch #{$i} eine höhere Nummer bekommt. Die Variable – und somit auch die Bezeichnung – wird bei jedem Durchlauf um 1 erhöht.
#{} ist in SASS eine sogenannte Interpolation. Damit können Sie eine Variable mit einem selbst vergebenen Bezeichner kombinieren.
Zweitens schreiben Sie in geschweifte Klammern bzw. eingerückt, was eigentlich geschehen soll. In unserem Beispiel wird bei jedem Durchlauf eine Größenangabe mit einem steigenden Wert manipuliert. Im CSS erscheint anschließend für jeden Durchlauf ein eigener Eintrag:
CSS
.width-1 {
width: 11em;
}
.width-2 {
width: 12em;
}
.width-3 {
width: 13em;
}
.width-4 {
width: 14em;
}
.height-1 {
height: 25em;
}
.height-2 {
height: 50em;
}
.height-3 {
height: 75em;
}Die Direktive @while funktioniert ganz ähnlich wie @for. Während aber letztere festgelegte Start- und Zielpunkte hat, beinhaltet eine @while-Schleife eine logische Abfrage: Solange ein Zustand wahr ist, werden die Anweisungen wiederholt. Wie Sie sehen werden, können wir mit der @while-Funktion exakt das gleiche Ergebnis erreichen:
SASS
$i: 1
@while $i < 5
.width-#{$i}
width: 10em + $i
$i: $i + 1SCSS
$i: 1;
@while $i < 5 {
.width-#{$i} { width: 10em + $i; }
$i: $i + 1;
}Bei dieser Schleifenart müssen Sie der Variablen zunächst einen Wert zuweisen, da die Direktive selbst keinen Startwert erfordert. In der Schleife geben Sie an, bis zu welchem Zustand die Wiederholungen durchgeführt werden. In unserem Beispiel läuft der Loop, solange die Variable kleiner als 5 ist. Die Anweisung innerhalb der Schleife ist vorerst die gleiche wie im @for-Beispiel. Wieder lassen Sie die Bezeichnung des Elements der Variablen anpassen und die Größe steigern. Zusätzlich müssen Sie aber noch einen Befehl in die Schleife integrieren, mit dem $i bei jedem Durchlauf erhöht wird, da sonst die Schleife solange läuft, bis der SASS-Compiler gestoppt wird. Am Ende erhalten Sie aber den gleichen CSS-Code wie bei der @for-Schleife.
Die @each-Direktive arbeitet hingegen etwas anders. Grundlage dieser Schleife ist eine Liste: Die Schleife durchläuft eine von Ihnen festgelegte Sammlung von Daten. Für jeden Eintrag macht @each eine eigene Wiederholung. So wäre es beispielsweise möglich, wieder das gleiche Ergebnis wie bei den anderen Schleifen zu erzeugen, indem Sie eine Liste mit den Werten 1, 2, 3 und 4 angeben. Der wirkliche Vorteil dieses Loops liegt allerdings darin, dass Sie auch andere Angaben außer Zahlenwerten in die Liste eintragen können – z. B. fügen Sie mit @each unterschiedliche Bilder in Ihr Design ein. Sie können die Daten entweder direkt in die Direktive eintragen oder die Liste erst in eine Variable eintragen und dann aufrufen.
SASS
$list: dog cat bird dolphin
@each $i in $list
.image-#{$i}
background-image: url('/images/#{$i}.png')SCSS
$list: dog cat bird dolphin;
@each $i in $list {
.image-#{$i} { background-image: url('/images/#{$i}.png'); }
}Auch hier benötigen Sie wieder eine Variable. Diese nimmt bei jedem Durchlauf die Bezeichnung einer der Einträge der Liste an. Der Name wird sowohl in die Bezeichnung des Code-Blocks als auch in den Dateinamen des Bildes integriert. Damit das Design später auch funktioniert, müssen Sie die entsprechenden Bilder unter dem angegebenen Pfad natürlich auch hinterlegt haben. Die Schleife sorgt selbstständig dafür, dass die Variable den nächsten Eintrag übernimmt.
CSS
.image-dog {
background-image: url("/images/dog.png");
}
.image-cat {
background-image: url("/images/cat.png");
}
.image-bird {
background-image: url("/images/bird.png");
}
.image-dolphin {
background-image: url("/images/dolphin.png");
}Verzweigung
Neben Schleifen ermöglicht Ihnen SASS noch ein weiteres Mittel, das man sonst aus der Programmierung kennt: Verzweigungen nach dem Prinzip Wenn-dann-sonst. Mit der @if-Direktive lassen Sie eine Anweisung nur dann ausführen, wenn ein bestimmter Zustand besteht, ansonsten greift ein anderer Befehl. Neben der Direktive gibt es auch eine Funktion if(). Beide sind unabhängig voneinander, können aber auch gemeinsam auftreten. Die Funktion selbst ist schnell erklärt. In ihr enthalten sind drei Parameter: die Kondition und zwei verschiedene Outputs. Der erste Output wird ausgegeben, falls der erste Parameter wahr ist, ansonsten spielt die Funktion den dritten Parameter aus.
SASS
$black: #000000
$white: #ffffff
$text-color: $black
body
background-color: if($text-color == $black, $white, $black)SCSS
$black: #000000;
$white: #ffffff;
$text-color: $black;
body {
background-color: if($text-color == $black, $white, $black);
}In unserem Beispiel überprüft die Funktion, ob die Variable $text-color auf black (schwarz) gestellt ist. Sollte dies zutreffen (wie im Beispiel), wird der Hintergrund weiß dargestellt. In jedem anderen Fall würde das CSS den Hintergrund auf schwarz setzen. Wie man an diesem Beispiel schon erkennen kann, eignen sich die Verzweigungen nicht unbedingt für die Gestaltung einer ganzen Website. Sowohl Direktive als auch Funktion sind in erster Linie in Mixins oder Partials sinnvoll. So kann die Vorlage besser darauf reagieren, was beim finalen Design für Werte vorkommen. Umgekehrt gilt: Wenn Sie ohnehin wissen, dass Ihre Textfarbe schwarz ist, müssen Sie keine komplexe Verzweigung schreiben, damit der Hintergrund weiß dargestellt wird.
Funktionen haben die Eigenschaft, einen einzelnen Wert wiederzugeben. Für komplexere Ansprüche verwenden Sie daher die @if-Direktive. Diese hat auch den Vorteil, dass sie mehr als zwei Fälle voneinander unterscheiden können:
SASS
$black: #000000
$white: #ffffff
$lightgrey: #d3d3d3
$darkgrey: #545454
@mixin text-color($color)
@if ($color == $black)
background-color: $white
@else if ($color == $white)
background-color: $black
@else if ($color == $lightgrey)
background-color: $black
@else
background-color: $white
p
@include text-color($lightgrey)SCSS
$black: #000000;
$white: #ffffff;
$lightgrey: #d3d3d3;
$darkgrey: #545454;
@mixin text-color($color) {
@if ($color == $black) {
background-color: $white;
}
@else if ($color == $white) {
background-color: $black;
}
@else if ($color == $lightgrey) {
background-color: $black;
}
@else {
background-color: $white;
}
}
p {
@include text-color($lightgrey);
}Die Syntax der Direktive ermöglicht es Ihnen theoretisch, für jeden vorgesehenen Wert einen Fall zu kreieren. Achten Sie dabei darauf, dem anfänglichen @if die Direktive @else folgen zu lassen, die Sie in Kombination mit if so häufig aufrufen dürfen, wie Sie möchten. Nur das letzte @else bleibt frei, und Sie decken damit alle anderen Fälle ab.
Kommentare
Auch bei SASS ist es sinnvoll, den Quelltext mit Kommentaren zu versehen. Durch eine sinnvolle Kommentierung bleibt das Dokument auch in der Zukunft für Sie und andere noch verständlich. Besonders wenn Sie Vorlagen für andere Nutzer einrichten, helfen Sie diesen mit Kommentaren bei der Bearbeitung. Viele Webdesigner benutzen Kommentare auch, um den Code übersichtlicher gliedern zu können. Die meisten Programmier- und Auszeichnungssprachen besitzen die Möglichkeit, Text in den Code einzufügen, der beim Kompilieren oder Parsen nicht beachtet wird. Dieser Text ist ausschließlich für den Menschen interessant und nicht für den Computer.
Programmierer und Webdesigner benutzen Kommentare auch, um korrekten Code auszukommentieren: Hierbei setzen Sie einen Code-Block, den Sie aktuell nicht brauchen, aber auch nicht final aus dem Quelltext löschen möchten, in die entsprechenden Kommentarmarkierungen.
Jede Sprache hat eine spezifische Methode, Text auszukommentieren. In SASS erledigen Sie dies auf zwei verschiedene Arten. Zum einen steht Ihnen die gleiche Möglichkeit zur Verfügung, die Sie auch in CSS haben: /* */. Mit dieser Methode können Sie direkt mehrere Zeilen auskommentieren. Oft finden Sie Kommentare in CSS oder SASS, bei der jede Zeile im Kommentarblock mit einem Sternchen beginnt. Dies ist allerdings nur eine Konvention und keine Notwendigkeit.
/* Dies ist ein Kommentar.
Alles zwischen den entsprechenden Markierungen
wird nicht beachtet. */Beim Kommentieren ist es nicht wichtig, ob Sie Ihren Code in SCSS oder in der „indented syntax“ schreiben. In beiden SASS-Syntaxen funktionieren Kommentare gleich.
Außer mit der aus CSS bekannten Methode können Sie in SASS mit // auch einzelne Zeilen auskommentieren:
// Diese Ziele ist ein Kommentar.
// Und diese Zeile auch.Der Unterschied zwischen beiden Methoden besteht auch darin, dass mit den Standardeinstellungen die erste Variante ins kompilierte CSS übernommen wird, während die zweite Variante einfach verloren geht. So oder so sollten Sie aber kein CSS-Dokument mit Kommentaren im Code als Produktivversion online gehen lassen. Hierfür verwenden Sie eine minimierte Fassung, die Browser schneller laden können.