SASS Grundlagen


1. Was ist SASS?
2. Der Pre-Processor und seine Vorteile
3. Variables, Nesting, Mixins, Extends, Imports, Operators
4. Mit dem Sassmeister vergleichen
5. Kompilieren

1. Was ist SASS?

SASS ist ein CSS Pre-Processor und steht für Syntactically Awesome Stylesheets. Mit SASS lässt sich CSS-Code in einer Syntax schreiben, die speziell beim Development-Prozess zu einer höhereren Effizienz führt. Wer bereits Vorkenntnisse in der Entwicklung mit CSS hat, wird mit SASS schnell vertraut sein. Denn auch wenn SASS viele Möglichkeiten zur schnelleren, effektiveren und codesparenden Entwicklung von Styles schafft, ist die Basis immer noch CSS.

2. Der Pre-Processor und seine Vorteile

Die Vorteile der Entwicklung mit SASS sind Effizienz beim Entwicklungs-Prozess, browserkonforme Codestrukturen und optimerter CSS-Code nach dem Kompilieren. Mit Effizienz ist die effizientere Entwicklung im Vergleich zum Coden in reinem CSS gemeint. Durch die Verwendung des Nestings oder auch von Variablen, können Klassen und ID´s eingespart oder Parameter zentral angepasst werden, die erst durch das Kompilieren in browserkonformen Code umgewandelt werden.

Raised Image

3. Variables, Nesting, Mixins, Extends, Imports, Operators

Variables

In reinem CSS können keine Variablen verwendet werden, in SASS dagegen schon. Die Initialisierung kann in größeren Projekten auch in einer zentralen variables.scss-Datei für alle verwendeten Variablen vorgenommen werden.

Initialisierung
$primary-width: 400px;
Verwendung
body {
  width: $primary-width;
}

Mit Interpolationsoperator
$content-class: content;
$content-attribute: color;
Verwendung
div.#{$content-class} {
  #{$content-attribute}: #FFA500;
}

Nesting

Das Nesting verwendet man beim Coden von SASS am häufigsten, um die Wiederverwendung von Klassen und ID´s zu nutzen. Wie im folgenden Beispiel gezeigt, wird durch Einrückungen z.B. eine angehangene Klasse hinzugefügt.

SCSS: Verkettung von Klassen
.icon {
  &.button {
    color: green;
  }
}
CSS:
.icon.button {
  color: green;
}

SCSS: Eingerückte Klasse vor die root-Klasse setzen
.icon {
  .button & {
    color: green;
  }
}
CSS:
button .icon {
  color: green;
}

Mixins

Mit Mixins können sich wiederholende Code-Blöcke initialisiert und mit der @include-Anweisung verwendet werden. Im unteren Beispiel wird das Mixin mit dem Namen Table initialisiert und im Table-Tag eingefügt.

Initialisierung
@mixin table {
    background: #333;
    border: 1px solid #000;
}
Verwendung
table {
    @include table;
}

Mixin mit Parametrisierung
@mixin border ($radius, $width, $style, $color) {
  border-radius: $radius;
  border: $width $style $color;
}
Verwendung
div {
    @include border(0.25rem 1px solid #008000);
}

Extends

Extends ermöglichen die Erweiterung von CSS Parametern von einem Selektor zu einem oder mehreren anderen. Im unteren Beispiel werden Button-Stile in einem Extend definiert und in der Klasse .button mit der @extend-Anweisung eingefügt.

Initialisierung
%button-about {
  border: 1px solid #ccc;
  padding: 10px;
  background: #333;
}
Verwendung
.button {
  @extend %button-about;
}

Imports

Mit den Imports werden Sass-Dateien importiert. Ein bekanntes Beispiel ist die Variablen-Datei variables.scss, mit der die definierten Variablen zentral initialisiert und über die Import Direktive importiert werden kann

variables.scss
$primary-color: #cd853f;
$secondary-color: #666;
$primary-border: 2px solid green;
Verwendung
@import 'variables';
.
.
.

Operators

Zum Berechnen von Pixel- oder auch Farbwerten können Operatoren verwendet werden. Um Beispiel wird eine einfache Berechnung der Breiter der Container-Klasse definiert.

.container {
  width: 600px / 960px * 100%;
}
Colors
darken( $base-color, 10% )
lighten( $base-color, 10% )
Box Styles
border: 1px solid darken($base-color, 20%);
text-shadow: 0 -1px 0 darken($base-color, 10%);
@include box-shadow(inset 0 1px 0 lighten($base-color, 20%));

4. Mit dem Sassmeister vergleichen

Während der Entwicklung mit SASS will man vor allem beim Nesting das kompilierte Endergebnis in CSS prüfen. Dazu kann man mit dem Online-Tool Sassmeister in Gegenüberstellung des Sass- mit dem CSS-Codes vergleichen.

Raised Image

5. Kompilieren

Da SASS-Code nicht vom Browser verarbeitet werden kann, muss der entwickelte Code mit Tools, bzw. Task-Runnern wie Gulp, Grunt oder Webpack, kompiliert werden. Erst nach dem Kompilieren steht eine finale CSS-Datei zur Verfügung.