Webentwicklung und mehr

933
Fotografie eines Text-Editors mit CSS Code
Photo by Maik Jonietz on Unsplash

Variablen in CSS benutzen – eine Anleitung für SASS/SCSS

Haben Sie sich schon einmal die Frage gestellt ob es möglich ist Variablen in CSS zu verwenden? Vor dieser Frage stand ich, als ich im Internet auf die Möglichkeiten stieß, die CSS-Präprozessoren wie SASS oder LESS bieten. Nach kurzer Recherche entschied ich mich dazu die Grundlagen von SASS zu lernen weil ich zu der Zeit viele Projekte mit dem Framework Foundation umgesetzt habe, das ebenfalls auf SASS basiert.

SASS (Abkürzung von Syntactically Awesome Stylesheets) ist eine andere Schreibweise für Stylesheets. Stellen Sie es sich wie CSS mit Variablen und Funktion vor.

Die Sprache bietet zwei Schreibweisen. Die originale, welche als SASS bezeichnet wird und eine alternative, die als SCSS bezeichnet wird. SCSS ist in seiner Schreibweise nahezu identisch mit CSS. Alle Beispiele in dieser Anleitung sind ausschließlich in SCSS geschrieben. Abgesehen davon kann es passieren, dass ich die Begriffe SASS und SCSS Synonym verwende – da letztlich aller Code durch einen SASS-Compiler läuft. Der Compiler ist ein Programm, dass aus einer SASS Datei eine für den Browser verständliche CSS Datei erzeugt. Auf der SASS-Webseite wird beschrieben wie Sie SASS über die Kommandozeile installieren. Alternativ gibt es Programme mit grafischer Oberfläche. Ich empfehle Scout (für Mac) oder Scout-App (für Windows).

In SASS bezeichnet man Variablen als Variablen, aus Funktionen werden Mixins außerdem gibt es die verschachtelte Schreibweise. Was das alles bedeuten soll lesen Sie jetzt.


Variablen in CSS nutzen. Mit SCSS kein Problem.

Mit SCSS können Sie Variablen in CSS nutzen. Variablen speichern Werte. Sie müssen eine Variable nur ein mal erstellen um sie an beliebigen Orten in der SCSS Datei zu verwenden. Das bringt bei große Projekten mit vielen tausend Zeilen Code große Vorteile mit sich.

Stellen Sie sich folgendes Szenario vor. Sie haben eine schöne Firmenwebseite im modernen Responsive Design für Ihren Kunden erstellt. Ihr Kunde ist ziemlich Happy aber die Schriftfarbe stimmt noch nicht so ganz. Glücklicherweise nutzen Sie bereits SCSS und haben die Schriftfarbe in einer Variable gespeichert. Sie ändern lediglich den Wert der Variablen lehnen sich entspannt zurück und lassen den Compiler Ihr neues CSS schreiben.

Variablen beginnen mit einem Dollar-Zeichen und werden wie CSS Werte definiert. Sehen Sie sich dafür das folgende Beispiel an:

$textColor: green;
$textSize: 14px;

p {
    color: $textColor;
    font-size: $textSize;
}

h1 {
    color: $textColor;
}

CSS mit Funktionen. Mixins machen’s möglich

Funktionen stellen die Anwendungslogik in der Programmierung bereit und werden verwendet, wenn es darum geht komplexe Anweisungen mehrfach oder an unterschiedlichen Orten durchzuführen. Außerdem helfen sie Code zu strukturieren und Schreibaufwand zu reduzieren. SASS ist eine Stylesheet-Sprache. Es lassen sich keine Programme damit schreiben. Dennoch bietet SASS mit Mixins die Möglichkeit Textblöcke zu gruppieren und diese durch ein Kürzel an verschiedenen Stellen im Stylesheet einzufügen. Auch Argumente können Sie in Mixins nutzen. Sehen Sie sich das nächsten Beispiel an:

@mixin vendor($name, $argument) {
    -webkit-#{$name}: #{$argument};
    -ms-#{$name}: #{$argument};
    -moz-#{$name}: #{$argument};
    -o-#{$name}: #{$argument};
    #{$name}: #{$argument};
 }

Sie kennen das Problem, wenn Sie Vendor-Prefixe verwenden. Man muss einfach alles doppelt und dreimal eingeben. Mit der oben stehenden „Mixin-Funktion“ können Sie den Schreibaufwand im Stylesheet erheblich reduzieren.

div.round-box {
    @include vendor(border-radius, 5px);
}

CSS-Selektoren ganz einfach kombinieren mit der verschachtelten Schreibweise

Um den Schreibaufwand beim Verbinden von CSS-Selektoren zu verringern bringt SCSS die verschachtelte Schreibweise mit. Ich verwende die verschachtelte Schreibweise immer gerne bei in sich geschlossenen Modulen wie zum Beispiel einer JavaScript (jQuery) Slideshow. Werte die innerhalb des Moduls gesetzt werden, haben keine Auswirkungen auf Elemente, die sich außerhalb des Moduls befinden. In der üblichen CSS Schreibweise funktioniert das so:

.slideshow p {
    background: white;
    color: black;
}
.slideshow h1 {
    font-size: 64px;
    font-weight: bold;
}
.slideshow .item {
    width: 100%;
}

Die verschachtelte Schreibweise in SCSS ermöglicht die Umsetzung mit weniger Text:

.slideshow {
    p {
        background: white;
        color: black;
    }
    h1 {
        font-size: 64px;
        font-weight: bold;
    }
    .item {
        width: 100%;
    }
}

Selbstverständlich sind die Möglichkeiten mit SASS deutlich umfangreicher. Die oben genannten Funktionen (unter anderem die Verwendung von Variablen in CSS) nutze ich aber regelmäßig. Wenn Sie finden, dass ich etwas wichtiges vergessen habe, dann schreiben Sie gerne einen Kommentar.

Abschließend möchte ich noch auf die SASS-Dokumentation (Englisch) verweisen in der sie weiteres über die Möglichkeiten von SASS erfahren können.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert