SCSS

SCSS ist wie eine erweiterung von CSS. Damit kann man Variablen erstellen und effektiver Code schreiben.Das SCSS ersparrt einem viel Text und ist auch übersichtlicher als alles nur im CSS zu schreiben.

Variabeln

Mit dem Symbol $ kann man ganz einfach Variabeln machen um Informationen in einem Stylesheet wiederverwenden zu können. Beispiel:

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
     font: 100% $font-stack;
     color: $primary-color;
}

Verschachteln (nesting)

Durch SCSS kann man CSS Selectors verschachteln:

nav {
    ul {
       margin: 0;
       padding: 0;
       list-style: none;
  }

    li {
       display: inline-block;
  }

    a {
       display: block;
       padding: 6px 12px;
  }
}

Teilung (partials)

Man kann auch Datei importieren b.z.w verknüpfen und Teildateien erstellen. Teildaten identifiziert man daran das diese immer ein Untersicht (_) vor dem Namen haben: _hello.scss. 

Diese kann im Hauptdatei mit @import eingebunden werden.

Durch Mixin kann man eine Gruppe von CSS Deklarationen erstellen und auch als Variabeln gestalten.

@mixin border-radius($radius)
   -webkit-border-radius: $radius;
   -moz-border-radius: $radius;
   -ms-border-radius: $radius;
}

.box { @include border-radius(10px); }

Rechnen (operators)

Es können folgende Zeiche benutzt werde: +, -, /, *, %. 

span {padding: top; width: 100px / 220px * 100%;}

= 45.45%