Frontend Styling mit SASS

Veröffentlicht am von

Wenn du dich für Webdesign interessiert, dann bist du hier genau richtig. In diesem Blogartikel werde ich dir zeigen, wie du moderne Tools einsetzen kannst, um effizient deine eigenen Stylesheets mit SASS zu erstellen.

Warum sollte ich zu SASS wechseln?

Das ist eine gute und berechtigte Frage. Der Einsatz von neuen Tools erfordert unausweichlich mehr Zeit als mit Tools zu arbeiten die man bereits kennt.

Hier werde ich kurz einige der Vorteile von SASS aufführen. Wenn du dir bereits sicher bist, dass du SASS benutzen möchtest, kannst du diesen Teil überspringen und direkt dein eigenes SASS-Projekt starten.

Déjà-vu – CSS voller Redundanzen

Eine ansehnliche moderne Weboberfläche erfordert sehr viel Arbeit. Wenn du dieses Unterfangen mit CSS angehen möchtest, kommt dazu auch noch ein beachtlicher Teil Fleißarbeit.

Bei m Betrachten eines CSS-Stylesheets wird einem schnell klar, dass es vor Redundanz nur so strotzt. Zum Beispiel wird die gleiche Farbe an hunderten Stellen wieder und wieder definiert. Wenn man jetzt zu Testzwecken gerne sehen möchte, wie sich die Seite in einem schicken Waldgrün macht, heißt es: “suchen und ersetzen”. Besonders spaßig wird es, wenn man Farben wie Weiß oder Schwarz ersetzt. Diese kommen nämlich recht häufig im CSS auf. Wenn solche Farben einfach wahllos ersetzt werden kann es passieren, dass der gesamte Text sowie dessen Hintergrund in einem frischen Waldgrün erstrahlen.

In SASS kannst du Variablen benutzen. Diese Kleinigkeit war für mich ausreichend, um das Arbeiten mit SASS mal zu versuchen. Die primären Farben deiner Webseite kannst du in Variablen auslagern, die du ganz bequem jederzeit verändern kannst. Dadurch sieht man unser Waldgrün in wenigen Sekunden. Nicht nur Farben können Variablen zugewiesen werden, sondern auch Werte für Margins, Height, Width und so weiter.

Beispiel Variable:

$forestgreen: #075503;

Es ist auch möglich Maps zu benutzen.

Beispiel für eine Map:

$sizes-map: (
  big: 20px,
  normal: 16px,
  small: 14px
);

Diese Variablen lassen sich hervorragend mit Mixins kombinieren. Was ein Mixin ist? Man könnte sagen ein Mixin ist eine Methode oder Funktion in SASS. Diese Mixins kannst du dann im Stylesheet so oft du es brauchst wiederverwenden.

Beispiel für ein Mixin (SCSS Syntax):

@mixin big-colorful-text($color){
    color: $color;
    font-size: 2em;
}

Bei Variablen und Mixins hört es aber noch nicht auf. SASS erlaubt es dir Schleifen in deinen Stylesheets zu schreiben!

Beispiel für eine Schleife (SCSS Syntax):

$icons: user, help, admin;

@each $icon in $icons {
  .icon-#{$icon} {
    background-image: url('/images/#{$icon}.jpg');
  }
}

Dank dieser Schleife werden jetzt für jedes Icon eine CSS-Klasse geschrieben. Wir hätten jetzt z.B. die Klasse icon-help.

Alle diese Elemente lassen sich natürlich auch kombinieren. Es gibt unendlich viele Möglichkeiten. Viel Spaß damit!

Kompatibilität im Web

Ein weiteres Problem tritt auf, wenn die Webseite auf möglichst allen Browsern gleich aussehen soll. Bewusst wird einem das besonders dann, wenn die eigene Seite im Internet Explorer geöffnet wird. Dabei sah es im Chrome doch gerade noch so gut aus.

SASS kann natürlich nicht jedes Problem lösen. Auch wenn du SASS benutzt, musst du selber noch darauf achten, dass deine Webseite in allen Browsern korrekt dargestellt wird. Allerdings nimmt dir SASS auch hier Arbeit ab. Du kannst Funktionen (Mixins) schreiben in denen du Rücksicht auf Browser-Kompatibilität nimmst. In den Stylesheets wird jetzt einfach immer das Mixin. 

Struktur im Stylesheet

Es liegt in der Natur von CSS unübersichtlich zu sein. Die Sprache macht es einem schwer eine ordentliche Struktur im Stylesheet zu erhalten. Dieses Problem ist auch ein Symptom der Redundanz im Code.

Wenn du dich für SASS entscheidest kannst du deine Stylesheets viel übersichtlicher gestalten. SASS bietet eine Reihe an Möglichkeiten bereits geschriebenen Code wiederzuverwenden. Ein Beispiel dafür sind die oben erläuterten Mixins. Dir ist es erlaubt Stylesheets zu importieren und so das Projekt sauber zu halten. Auch die Schleifen im SASS sorgen für mehr Übersicht und eine klare Struktur im Stylesheet.

Noch so viel mehr…

Alle Funktionen von SASS hier zu erläutern würde wohl den Rahmen sprengen. SASS ist wirklich umfangreich doch es ist lohnenswert am Ball zu bleiben und sich weiter mit SASS auseinanderzusetzen.

Links für mehr Informationen:

Wie fange ich mit SASS an?

Damit du anfangen kannst SASS in deinen Projekten anzuwenden, musst du zuerst einige Tools installieren.

Du benötigst:

  • NodeJS
  • NPM
  • Gulp

NodeJS

NodeJS kann einfach von der offiziellen Webseite heruntergeladen werden.

Hier geht es zur offiziellen Webseite von NodeJS:

NPM

Mit NodeJS hast du auch eine veraltete Version von NPM installiert. NPM ist ein Paketmanager. Um die aktuellsten Versionen zu erhalten und Problemen aus dem Weg zu gehen, werden wir NPM updaten.

Die aktuelle Version prüfen:

npm -v

NPM updaten:

npm install -g npm@latest

NPM hilft uns auch zu dokumentieren welche Pakete für dein SASS-Projekt benötigt werden. Dafür verwenden wir den –save Parameter. Dieser notiert das installierte Paket dann in der package.json. Es ist auch möglich Pakete, die ausschließlich für die Entwicklung benötigt werden, als Entwicklungs-Abhängigkeiten zu kennzeichnen. In diesem Fall wird der Parameter –save-dev genutzt.

Später ist es dadurch für andere Entwickler sehr einfach alle benötigten Pakete zu installieren. Wenn nur npm install ausgeführt wird prüft NPM ob im aktuellen Verzeichnis eine package.json vorhanden ist. Wenn das der Fall ist werden alle darin notierte Pakete installiert.

Gulp

Gulp kannst du mit NPM herunterladen und installieren, führe hierzu einfach folgenden Befehl für die globale installation aus:

npm install -g gulp@latest

Wir benötigen Gulp auch auf Projektebene. Um Gulp für dein Projekt zu installieren navigiere in das Stammverzeichnis deines Projektes und führe folgenden Befehl aus:

npm install --save gulp@latest

Gulp ist ein sehr nützliches Werkzeug. Es ermöglicht dir kleinere Aufgaben, die immer wieder anfallen, zu automatisieren. Ein gutes Beispiel wäre das Kompilieren deines SASS-Codes in CSS. Wir werden später in unserem Projekt auch Gulp verwenden.

Dein SASS-Projekt

Jetzt kommen wir zu deinem vielleicht ersten eigenen SASS-Projekt. Schritt für Schritt werden wir gemeinsam ein kleines Projekt schreiben, das neben SASS auch ein wenig HTML und JavaScript enthalten wird.

Ein Skelett aus Ordnern – Die Projektstruktur

Bevor wir anfangen SASS zu schreiben müssen wir erst die Projektstruktur anlegen. Die Projektstruktur kannst du nach deinen Vorlieben anpassen. Vergesse dann allerdings nicht die Pfade aus diesem Beispiel deiner Projektstruktur entsprechend anzupassen.

Hier die für dieses Beispiel verwendete Projektstruktur:

 

Um gleich richtig anfangen zu können, bereiten wir NPM für unser neues Projekt vor.

Begebe dich in der Konsole in das Projekt und führe folgenden Befehl aus:

npm init

Du kannst eine Reihe von Metadaten hier angeben oder einfach die Vorschläge von NPM annehmen. Keine Sorge, du kannst alle Angaben zu einem späteren Zeitpunkt in der package.json bearbeiten.

Das Rad nicht neu erfinden – Bootstrap 4

Bootstrap ist ein Frontend-CSS-Framework und es nimmt dir wirklich sehr, sehr viel Arbeit ab. Bootstrap selbst wurde in SASS geschrieben und wir werden es mit unserem eigenen SASS erweitern. Bei der Entwicklung von Bootstrap wurde sehr viel Wert darauf gelegt, dass es möglich ist Webseiten zu designen die auf verschiedenen Endgeräten (PC, Smartphone, Smart-TV) lesbar und schön darzustellen.

Innerhalb von Bootstrap sind viele wichtige Komponenten einer webseite schon Enthalten. So gibt es beispielsweise schon Buttons, Navbars, Progress-Bars und vieles weitere. Es ist klug diese zu nutzen und anzupassen. So müssen wir nicht bei Null anfangen.

Wir können den Quelltext von Bootstrap ganz einfach über NPM installieren:

npm install --save bootstrap@4.1.1

In diesem Beispiel verwenden wir Bootstrap 4.1.1. Falls vorhanden, darfst du selbstverständlich auch eine aktuellere Version von Bootstrap installieren. Ob dieses Beispiel dann noch reibungslos funktioniert, kann ich allerdings nicht garantieren.

Da wir den –save Parameter verwenden wird bootstrap in unserer package.json notiert.

Bootstrap ist sehr gut und ausführlich Dokumentiert. Du findest die Dokumentation auf der offiziellen Webseite von Bootstrap.

Tether und JQuery – JavaScript für Bootstrap und dich

Teether und JQuery sind zwei sehr umfangreiche JavaScript Frameworks. Bootstrap benötigt beide Frameworks um wie erwartet zu funktionieren. Wenn du wissen möchtest was diese Frameworks machen und wie man selber damit arbeiten kann, dann empfehle ich dir die offizielle Dokumentation:

Im Rahmen dieses Artikels werden wir beide JavaScript Frameworks installieren.

Das machen wir wie folgt:

npm install --save tether
npm install --save jquery

Die ersten Zeilen SASS

Unser Ziel ist es Bootstrap um unsere eigenen Stylings zu erweitern. Später müssen wir nur eine einzelne generierte CSS-Datei in unser HTML einbinden. Es ist uns möglich Variablen aus Bootstrap zu überschreiben und so nicht nur unsere Stylings zu beeinflussen sondern auch die von Bootstrap. Lege in deinem Projekt unter dem Pfad src/scss/ eine neue Datei an. Für dieses Beispiel nennen wir sie mybootstrap.scss. SCSS ist die Syntax die wir verwenden werden. Die Standard Syntax von SASS ist an YAML angelehnt. Es liegt ganz bei dir welche Syntax du verwenden möchtest. Ich fühle mich mit der SCSS Syntax sehr wohl.

Importieren von Stylings

In unsere gerade erstellte mybootstrap.scss importieren wir jetzt alle Stylings die Bootstrap zu bieten hat. Das machen wir wie folgt:

@import "node_modules/bootstrap/scss/bootstrap";

Der Import startet auf dem Stammverzeichnis deines Projektes und navigiert von da zu den Bootstrap Sourcen die wir über npm installiert haben. Als nächstes sorgen wir dafür das wir Variablen an einer zentralen Stelle definieren können. Dafür legen wir unter dem Pfad

src/scss/

die Datei _variables.scss an. Hier können wir neue Variablen definieren oder bereits von Bootstrap genutzte Variablen überschreiben. Welche Variablen Bootstrap kennt findet man am besten mit einem Blick in die _variables.scss Datei von Bootstrap selbst. Diese findet ihr unter:

node_modules/bootstrap/scss/_variables.scss

Bestimmt ist dir aufgefallen das die Variablen alle mit !default beendet werden. Das ermöglicht es uns diese Variablen leicht zu überschreiben. Diese Default Werte werden nur dann angewandt wenn es nirgendwo sonst definiert wurde.

Jetzt müssen wir unsere Variablen mit in die mybootstrap.scss importieren. Dazu erweitern wir die Datei wie folgt:

@import "variables";
@import "node_modules/bootstrap/scss/bootstrap";

Unsere Variablen werden vor den Bootstrap Sourcen Importiert damit wir auch Inhalte von Bootstrap mit unseren Variablen beeinflussen können. Wir müssen bei dem Import der Datei nicht den Unterstrich am Anfang angeben.

Alle späteren Imports von SCSS-Dateien erfolgen nach dem Import der Bootstrap Sourcen!

Automatisierung mit Gulp.js.

Jetzt sorgen wir dafür, dass wir in Ruhe ohne viel Aufwand SASS Entwickeln können. Wir legen ein Gulpfile an. Dafür müssen wir lediglich die Datei gulpfile.js auf in dem Stammverzeichnis des Projektes anlegen. In diese schreiben wir folgenden Inhalt:

// Gulp.
var gulp        = require('gulp');
// Simple Server to serve our Browser.
var browserSync = require('browser-sync').create();
// SASS.
var sass        = require('gulp-sass');

// Compile SASS into CSS & auto-inject it into the browser.
gulp.task('sass', function() {
  return gulp.src('src/scss/*.scss')
  .pipe(sass()) // Compile SASS.
  .pipe(gulp.dest("src/css"))  // Move the CSS result into our /src/css folder.
  .pipe(browserSync.stream()); // Feed Browser with new Sources.
});

// Move the javascript files into our /src/js folder
gulp.task('js', function() {
  return gulp.src(['node_modules/bootstrap/dist/js/bootstrap.min.js', 'node_modules/jquery/dist/jquery.min.js', 'node_modules/tether/dist/js/tether.min.js'])
  .pipe(gulp.dest("src/js"))
  .pipe(browserSync.stream());
});

// Static Server + watching scss/html files
gulp.task('watch', gulp.series('sass', function() {

  browserSync.init({
    server: "./src"
  });

  // Watching changes inside SCSS Files
  gulp.watch('src/scss/*.scss', gulp.series('sass'));
  // Watching changes inside HTML Files
  gulp.watch("src/*.html").on('change', browserSync.reload);
}));

gulp.task('default', gulp.series('js', 'watch'));

In unserem Gulpfile benutzen wir einige NPM-Pakete die wir noch nicht installiert haben. Das holen wir jetzt nach.

npm install --save browser-sync
npm install --save gulp-sass

Abschließend muss nur noch eine index.html Datei unter /src/ angelegt werden in der wie innerhalb des <head> tags unser Stylesheet einbinden. Das sieht dann wie folgt aus:

  <link rel="stylesheet" href="/css/mybootstrap.css">

Jetzt kann losgelegt werden. Wir starten unsere Automatisierung indem wir einfach den Befehl

gulp

ausführen und bei Änderungen an einer HTML oder SCSS Datei wird der Browserinhalt neu geladen.

Print Friendly, PDF & Email