Sass – Präprozessor für CSS

Was ist Sass?
Sass steht für ‚Syntactically Awesome Style Sheets‘ ist ein Präprozessor für CSS, der Funktionen wie Variablen, Mixins und Loops mit sich bringt.
Nach dem Arbeiten mit Sass muss der geschriebene Code noch in CSS kompiliert werden, was je nach IDE auf verschiedenen Wegen geschehen kann.

Variablen
Wenn Sie schon etwas programmiert haben, sollten Sie wissen, was Variablen sind. Sass bringt diese nun auch ins CSS.
Es können Nummern (Integer, Float, …), Zeichenfolgen (‚Hello World‘), Farben (z.B. #ffffff oder rgb(255,255,255)) und Bool’sche Werte (true, false) eingesetzt werden.
Das Benennen einer Variable erfolgt mit dem $-Zeichen worauf dann der Name folgt. Dies und die Verwendung dieser Variable sind im unteren Beispiel, sowohl in SCSS als auch im kompilierten CSS, dargestellt.

SCSS
  
    $color-dark: #263238;

    .content__heading {
        color: $color-dark;
    }

Beim Kompilieren werden dann die Werte der Variablen im CSS benutzt.

CSS
  
    .content__heading {
        color: #263238;
    }

Nesting
Inspiriert von der klaren Hierarchie von z.B. HTML und XML, ist das Nesting, also die ‚Verschachtelung‘ in Sass eingebaut. Sass bietet die Möglichkeit, Selektoren zu verschachteln und somit übersichtlichere Selektorketten zu bilden. Falls der ‚parent‘, also der übergeordnete Selektor benötigt wird, wird dieser mit dem &-Zeichen eingebunden.

SCSS
  
    $color-dark: #263238;
    $color-white: #ffffff;

    .content__header {
      width: 100%;

      .header__heading {
        color: $color-dark;

          &:hover {
            color: $color-white;
          }
        }
      }

Aus dem Beispiel geht hervor, dass es eine Überschrift in einem Header gibt.

CSS
  
    .content__header {
      width: 100%;
    }

    .content__header .header__heading {
      color: #263238;
    }
	
    .content__header .header__heading:hover {
      color: #ffffff;
    }

Schleifen und if / else
Was Sie wahrscheinlich auch schon kennen, sind Loops, also z.B. ‚for‘- und ‚while‘-Schleifen und ‚if‘ und ‚else‘. In Sass werden die Schlüsselwörter mit einem anührenden @-Zeichen benutzt.

SCSS
  
    $count: 2;
    $isBlack: true;

    @for $i from 1 through $count {
      .div#{$i} {
        @if $isBlack == true {
          background-color: black;
          $isBlack: false;
        }
        @else {
          background-color: white;
          $isBlack: true;
        }
        width: 100px * $i;
        height: 50px;
      }
    }

Diese ‚for‘-Schleife entspricht ‚for (int i = 1; i < count; i++)‘ und erstellt beim Kompilieren zwei Klassen.

CSS
  
    .div1 {
      background-color: black;
      width: 100px;
      height: 50px;
    }
    .div2 {
      background-color: white;
      width: 200px;
      height: 50px;
    }

Mixins und Funktionen
Das so ziemlich Beste an Sass sind die Mixins und Funktionen, die Sass mit sich bringt. Die Schlüsselwörter ‚mixin‘ und ‚function‘ werden wie bei den Schleifen mit dem @-Zeichen eingeleitet. Mixins können dann mit dem Schlüsselwort ‚include‘ in Definitionen verwendet werden. Funktionen können einfach mit dem jeweiligen Namen genutzt werden.

SCSS
  
    @mixin border-radius($topleft, $topright, $bottomleft, $bottomright) {
      @if $topleft != 'null' {
        border-top-left-radius: $topleft;
      }
      @if $topright != 'null' {
        border-top-right-radius: $topright;
      }
      @if $bottomleft != 'null' {
        border-bottom-left-radius: $bottomleft;
      }
      @if $bottomright != 'null' {
        border-bottom-right-radius: $bottomright;
      }
    }

    .content__menu {
      float: left;
      width: 12.5vw;

      @include border-radius(null, 10px, null, 10px);
    }

Text, der dazu Sinn hat (default-Werte ($var:3), $var…, @return bei Funktionen)

CSS
  
    .content__menu {
      float: left;
      width: 12.5vw;
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
    }
von