📖CSS / SASS / SCSS

Durch plain CSS können schnell deine Stylesheets an Grösse gewinnen und unübersichtlich werden. SASS und SCSS dienen dir als Preprozessoren Struktur und Ordnung hineinzubringen und lassen sich dementsprechend kürzen. Zusätzlich erweitern Sie CSS mit Programmierfunktionen:

• Variabeln (variables)

• Verschachtelungen (nestings)

• Operatoren

• Mixins, Extends, Funktionen, usw.

Angular und Ionic setzen voll und ganz auf SCSS.

Preprocessors

Ein Preprocessor nimmt deine SCSS-Datei und wandelt Sie in eine herkömmliche CSS-Datei um. Denn dein Browser versteht nur CSS, kein SASS oder SCSS. Es gibt diverse Programme die dir diese Umwandlung abnehmen, egal ob Terminal, Programm oder in Ionic direkt - die Idee bleibt die gleiche. Im Beispiel unten ist zu sehen, dass SASS Tabulatoren verwendet, SCSS jedoch Klammern. In der Fachliteratur wird daher oft SASS synonym mit SCSS beschrieben.

Codebeispiel:

Neben der oben beschriebenen Sass-Syntax (indented syntax) verfügt Sass über die neuere und heute weiter verbreitete SCSS-Syntax (Sassy CSS). Hier sind für die Verschachtelung der Selektoren nicht die Einrückung des Quelltextes ausschlaggebend, sondern wie in der klassischen CSS-Schreibweise die geschweiften Klammern. Auch sind am Ende der Regeln Semikola erforderlich. Was kann der Browser anzeigen: HTML, CSS & JS ... aber nicht PUG/Jade, SCSS/SASS oder Typescript.

Variablen

Du kannst ganz einfach Variablen in Sass definieren. Oft werden Variablen für Grössen oder Farben verwendet.

<div class="wrapper">
  <h1>Variablen</h1>
  <h2>Ich liebe diese verschiedene Farben!</h2>
</div>

// SCSS: Variablen
// ----
$farbe-blau: #34495E;
$farbe-rot: #E74C3C;
$farbe-gruen: #2ECC71;
$groesse: 20px;

$hintergrund: $farbe-blau;

.wrapper {
  background: $hintergrund;
}
h1 { 
  font-style: italic;
  color: $farbe-rot;
}
h2 {
  font-size: $groesse;
  color: $farbe-gruen;
}

Wird zu CSS Code kompiliert:

.wrapper {
  background: #34495E;
}

h1 {
  font-style: italic;
  color: #E74C3C;
}

h2 {
  font-size: 20px;
  color: #2ECC71;
}

Nesting

Bei der Verschachtelung kann man sich einiges an Platz sparen und wie im HTML DOM die effektive Struktur der Seite stylen.

<h1>Ausserhalb eines DIV</h1>
<div class="wrapper">
  <h1>In einem DIV</h1>
</div>

// SCSS: Nesting
// ----
h1 { 
  color: red; 
}

.wrapper {
  h1 { 
  font-style: italic;
  color: black;
  }
}

Wird zu CSS Code kompiliert:

h1 {
  color: red;
}

.wrapper h1 {
  font-style: italic;
  color: black;
}

Operatoren

Operatoren sind eine ziemlich nützliche Sache.

<h1>Dies ist eine Box die durch Operatoren 15x grösser ist:</h1>
<div class="box">
</div>

Die SCSS-Datei

// SCSS: Operatoren
// ----
$faktor: 15;
h1 { 
  color: black; 
}

.box {
  background: red;
  height: 20px;
  width: 10px * $faktor;
}

wird zur CSS-Datei:

h1 {
  color: black;
}

.box {
  background: red;
  height: 20px;
  width: 150px;
}