CSS mit Superkräften

Datum: Juni 2020
Lesedauer: 5 Minuten

Theorie

Dieser Blogpost ist auf diejenigen ausgerichtet, welche bereits mit CSS vertraut sind.

SASS (Syntactically Awesome Style Sheets) ist ein in Ruby geschriebenes Programm, welches Stylesheets für einen Browser zusammenstellt. Es ist quasi eine Erweiterung von CSS und ist dazu da, den SCSS/SASS-Code zu kompilieren, sodass er vom Browser interpretiert werden kann. Dies bringt einige Vorteile mit sich, da es diverse Funktionen bietet, welche in CSS nicht existieren.

SCSS, auch Sassy CSS genannt, ist eine häufig verwendete Syntax für CSS. Sie ist ähnlich wie CSS. Jedoch mit einer besseren Formatierung. Daher funktioniert CSS-Code einwandfrei in SCSS - nicht aber umgekehrt.

graph

SCSS: Stylesheet, in welchem gearbeitet wird
SASS: Kompilierung
CSS: für Browser lesbares Dokument

Was kann SCSS?

Vorbereitung

Die unterstehenden Beispiele kann man auf zwei Arten ausprobieren

Variante 1

Damit man mit SCSS arbeiten kann, muss man eine Möglichkeit haben, die Datei zu kompilieren. Ich arbeite mit VSC und kann somit die Extension "Live Sass Compiler" installieren. Diese kompiliert dann meine Datei zu einem CSS.

Link: https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass (opens in a new tab)

Jetzt muss man noch folgendes tun:

File mit der Endung ..scss erstellen
SCSS File kompilieren (Watch Sass)
CSS File (welches erstellt wurde) im HTML verlinken

Nun kann man die Styles direkt in die SCSS Datei schreiben. Mit einem klick auf "Watch Sass" wird das Geschriebene umgewandelt in die CSS Datei geschrieben.

watch

Variante 2

Dank dieser Variante fallen einem die ersten Schritte wesentlich leichter, da man keine Extension braucht und nichts kompilieren muss.

Um SASS einfach mal auszuprobieren empfehle ich folgende Webseite: http://beautifytools.com/scss-compiler.php

Jedoch kann man auch SassMeister (https://www.sassmeister.com/ (opens in a new tab)) verwenden. Dies ist jedoch zu beginn etwas komplizierter (durch die vielen Optionen).

Variablen

Variablen sind grossartig. Sie ermöglichen einen übersichtlicheren Code und ersparen einem viel Arbeit. Wenn ich auf meiner Webseite mehrere Buttons habe, so muss ich unter Umständen an jedem Ort die gleiche Farbe definieren. Auch dieses Problem wird von Sass gelöst.

$primaryBtn: #3f32ff;
 
.button-one {
    color: $primaryBtn;
}
 
.button-two {
    color: $primaryBtn;
}
 
a {
    background-color: $primaryBtn;
}

Will ich jetzt die Farbe ändern. So muss ich nur den Wert der Variable verändern.

Man kann auch mehrere Variablen für eine Deklaration verwenden:

p {
    $border-thickness: 10px;
    $border-line: double;
    $border-color: black;
    border: #{$border-thickness} #{$border-line} #{$border-color};
}

Verschachteln

Auch das Verschachteln von Elementen stellt nun kein Problem mehr da.

SCSS

body {
    button {
        &:hover {
        }
    }
}

CSS

body {
}
 
body button {
}
 
body button:hover {
}

Dadurch werden die Wiederholungen um einiges reduziert.

Mixins

Mixins sind vergleichbar mit einer Funktion. Bei mixins schreibt man einen Code einmal.
Danach kann man ihn überall einsetzen.

Eine Einsatzmöglichkeit ist unten dargestellt. In einem Projekt kommt es vielleicht öfters vor, dass man ein Element, mithilfe von Flexbox, zentrieren will. Mit reinem CSS müsste man die drei Zeilen auf jedem Element deklarieren.

Mit SASS jedoch schreibt mein einmalig eine Funktion, welche ein Element in der Mitte platziert. Nun muss man diese Funktion nur noch bei den gewünschten Elementen hinzufügen.

@mixin center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.div-one {
    @include center();
}

Auch das Mitgeben von Parameter ist möglich

@mixin center($direction) {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: $direction;
}
 
.div-two {
    @include center(column);
}
 
.div-two {
    @include center(row);
}

Extend

Mit extend kann man die Properties eines Selektors auf einen anderen übertragen. So muss man den Code nicht immer wieder erneut schreiben.

.button {
    border: 1px solid black;
    padding: 10px;
    color: gray;
}
 
.button-submit {
    @extend .button;
    border-color: green;
}
 
.button-cancel {
    @extend .button;
    border-color: red;
}
 
.button-ok {
    @extend .button;
    border-color: yellow;
}

Verschachtelte Styles

Nicht nur Elemente, sondern auch Styles können verschachtelt werden.

h3 {
    font: {
        family: fantasy;
        size: 100px;
        weight: bold;
    }
}

Rechnen

Ein weiterer Vorteil ist, das Rechnungen durchgeführt werden können.

Aoditon: +
Subtraktion: -
Division: /
Multiplikation: *

div {
    width: 80% - 20px;
}

Each

Mit each spart man erheblich viele Zeilen Code, da man etwas für mehrere Elemente machen kann.
Im Beispiel hat man vier Basketball Teams. Nun wird für jedes Team das passende Hintergrundbild gesetzt.

SCSS

@each $team in bulls, lakers, celtics, pistons {
    .icon--#{$team} {
        background-image: url('/images/#{$team}.png');
    }
}

CSS

.icon--bulls {
    background-image: url('/images/bulls.png');
}
 
.icon--lakers {
    background-image: url('/images/lakers.png');
}
 
.icon--celtics {
    background-image: url('/images/celtics.png');
}
 
.icon--pistons {
    background-image: url('/images/pistons.png');
}

For Loop

Wie z. B. in JS, gibt es auch hier Schliefen. Eine davon ist die for-Schleife. Die kann auf zwei Arten verwendet werden:

from x to y
from x through y

Der Unterschied besteht darin, dass bei through die folgende Ziffer auch dazugehört.

SCSS

@for $i from 1 through 3 {
    .div-#{$i} {
        width: 2rem * $i;
    }
}

CSS

.div-1 {
    width: 2rem;
}
 
.div-2 {
    width: 4rem;
}
 
.div-3 {
    width: 6rem;
}

While Loop

In diesem Beispiel hat man eine Variable (i), mit dem Wert 6, deklariert. Solange diese Variable grösser als 0 ist, wird der Style des divs, mit der entsprechenden Ziffer, geändert.
Dabei wird die Breite auf 2em mal des Wertes von i. Danach wird die Variable um zwei verkleinern.

SCSS

$i: 6;
@while $i > 0 {
    .div-#{$i} {
        width: 2em * $i;
    }
    $i: $i - 2;
}

CSS

.div-6 {
    width: 12em;
}
 
.div-4 {
    width: 8em;
}
 
.div-2 {
    width: 4em;
}

Vortiele

mehr Möglichkeiten
sauberer Code
arbeitet mit Mixin und Variablen
Verschachtelungen
weniger Wiederholungen im Code

Nachteile

Code muss kompiliert werden:
Dies fügt dem Entwicklungsprozess einen weiteren Schritt hinzu. Dadurch wird der Prozess etwas länger.
Erschwerte Fehlersuche:
Anstatt Änderungen direkt in der CSS-Datei vornehmen zu können und die Auswirkungen sofort auf der Website zu sehen, müssen Änderungen im Design zunächst ins CSS übersetzt werden. Dadurch können sich Fehler einschleichen.
So wird das Debugging erschwert. Dies kann jedoch mit einem Tool umgangen werden.

Fazit

Vor wenigen Wochen habe ich von SCSS erfahren und ich war positiv überrascht. Ich habe ein paar Dinge ausprobiert und denke, dass es durchaus Sinn ergibt sich die Zeit zu nehmen, es zu lernen.

Tipp: Ich empfehle learn-sass um die Grundlagen von SASS und SCSS zu erlernen.
Das Node Paket findet man hier: https://www.npmjs.com/package/learn-sass (opens in a new tab)