Deutsche Übersetzung des SASS Guides

Einleitung SASS

Dieser Artikel ist eine deutsche Übersetzung des englischsprachigen Originalbeitrages von http://sass-lang.com/guide. Wir erheben keinen Anspruch auf fehlerfreiheit und sind für Kommentare dankbar.

Pre-processing

CSS alleine kann Spaß machen aber Stylesheets werden größer, komplexer und schwieriger zu warten. An dieser Stelle kann ein Preprocesser helfen. Sass lässt dich Funktionen nutzen die in herkömmlichen CSS bislang nicht existieren. Variablen, Verschachtelung, Mixins, Vererbung und andere Annehmlichkeiten machen CSS Entwicklung wieder angenehmer.

Wenn du mit dem Sass basteln anfängst nimmt der Preprocesser deine Sass Datei und speichert Sie als normale CSS Datei die du dann auf deiner Webseite verwenden kannst.

Variablen

Du kannst Variablen benutzen um Informationen in deinem gesamten Stylesheet wiederverwenden zu können. Du kannst Werte wie Farben, Schriftarten oder irgendwelche CSS Werte speichern die du später wiederverwenden möchtest. Sass benutzt das $ Symbol um aus einem Text eine Variable zu machen. Hier ist ein Beispiel:

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;
 
body {
  font: 100% $font-stack;
  color: $primary-color;
}

Wenn Sass verarbeitet wird nimmt es die definierten Variablen für $font-stack und $primary-color und gibt normales CSS mit den definierten Werten der Variablen zurück. Das kann sehr mächtig sein wenn mit Markenfarben gearbeitet wird und diese über die gesamte Seite wiederverwendet werden sollen.

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

Verschachtelung (Nesting)

Wenn du HML schreibst hast du wahrscheinlich gemerkt, dass es eine klare Verschachtelung und visuelle Hierarchie gibt. CSS hat das leider nicht.

Sass ist in der Lage CSS Selectors zu verschachteln und folgt dabei der visuellen Hierachie von HTML. Sei aber gewarnt: Zu viele Verschachtelungen enden in unübersichtlichem CSS und ist daher schwer zu warten und generell schlechter Umgang.

Behalte das im Kopf wenn du dieses typische Beispiel für eine Seitennavigation betrachtest:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
 
  li { display: inline-block; }
 
  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Du wirst bemerkt haben, dass die ul, li und a Selektoren in dem nav Selektor verschachtelt sind. Das ist eine fantastische Möglichkeit CSS zu organisieren und leserlicher zu gestalten. Wenn du das CSS generierst erhältst du ein ähnliches Ergebnis wie:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
 
nav li {
  display: inline-block;
}
 
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Teilung (Partials)

Du kannst Sass in mehrere Dateien aufteilen die alle kleine CSS Schnipsel enthalten, die du dann in anderen Sass Dateien verwenden kannst. Das ist ein toller Weg um CSS zu modulisieren und die Wartbarkeit zu erhöhen. Eine Teildatei ist eine einfache Sass Datei mit einem führenden Unterstrich (_). Du kannst es zum Beispiel _partial.scss nennen. Der Unterstrich weist Sass darauf hin, dass es nur eine Teildatei ist die nicht in eine eigene CSS Datei generiert wird. Sass Teildateien werden mit @import in die Hauptdateien eingebunden.

Importieren (Import)

CSS hat eine Import-Funktion die es dir erlaubt eine große CSS Datei in mehrere kleinere, einfache zu wartende, Portionen aufzuteilen. Der einzige Nachteil ist das jedes Mal wenn du @import in CSS benutzt ein neuer HTTP-Request gesendet wird. Sass baut auf dem CSS @import auf aber anstatt einen neuen HTTP-Request zu senden kombiniert Sass deine Dateien in eine einzige. So muss nur ein HTTP-Request gesendet werden und es wird nur eine einzige CSS Datei an den Webbrowser ausgeliefert.

Nehmen wir mal an du hast ein paar Sass Dateien (_reset.scss und base.scss). Wir möchten nun die _reset.scss in die base.scss importieren.

// _reset.scss
 
html,
body,
ul,
ol {
   margin: 0;
   padding: 0;
}
// base.scss
 
@import 'reset';
 
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

Beachte: Wir benutzen @import 'reset'; in der base.scss Datei. Wenn du eine Datei importieren möchtest kannst du auf die Dateiendung .scss verzichten. Sass ist smart und findet das für dich heraus. Wenn die CSS daraus generiert wird erhältst du das folgende:

html, body, ul, ol {
  margin: 0;
  padding: 0;
}
 
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

Mixins

Manche Dinge sind in CSS etwas lästig, besonders mit CSS3 und den vielen browserspezifischen Präfixen die es gibt. Ein Mixin lässt dich eine Gruppe von CSS Deklarationen erstellen die du dann wiederverwenden kannst. Du kannst auch Variablen übergeben und so deine Mixins flexibel gestalten. Ein gutes Beispiel sind die erwähnten Präfixe. Es folgt ein Beispiel für border-radius.

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}
 
.box { @include border-radius(10px); }

Um ein Mixin zu erstellen benutzt du die @mixin Direktive und vergibst einen Namen. Wir haben unsere Mixin border-radius genannt. Wir benutzen auch die Variable $radius innerhalb der Klammern so können wir später einen beliebigen Radius übergeben. Nach der Definition eines Mixin kannst du Sie als CSS Deklaration benutzen. Die Einbindung erfolgt mit @include gefolgt vom Namen des Mixin. Dein fertige generiertes CSS sieht dann so aus:

.box {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
}

Erweitern und Vererben (Extend/Inheritance)

Dies ist eine der nützlichsten Funktionen von Sass. Die Nutzung von @extend erlaubt es dir ein Set von CSS Eigenschaften von einem zu einem anderen Selektor zu übergeben. Das hilft deine Sass Dateien schlank zu halten. In unserem Beispiel erstellen wir eine einfache Serie von Meldungen für Fehler, Warnungen und Erfolge.

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
 
.success {
  @extend .message;
  border-color: green;
}
 
.error {
  @extend .message;
  border-color: red;
}
 
.warning {
  @extend .message;
  border-color: yellow;
}

Der Code oben erlaubt es dir die CSS Eigenschaften von .message zusätzlich auf .success, .error und .warning anzuwenden. Die Magie passiert beim Generieren der CSS und hilft dir bei der Vermeidung von vielen Klassen in deinen HTML-Elementen. So sieht die CSS Datei aus:

.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}
 
.success {
  border-color: green;
}
 
.error {
  border-color: red;
}
 
.warning {
  border-color: yellow;
}

Rechnen mit SASS (Operators)

Rechnen kann in CSS sehr nützlich sein. Sass hat eine Handvoll Operatoren wie +, -, *, / und %. In unserem Beispiel benutzen wir einfache Mathematik um die Breite für aside und article zu berechnen.

.container { width: 100%; }
 
article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}
 
aside[role="complimentary"] {
  float: right;
  width: 300px / 960px * 100%;
}

Wir haben ein sehr einfaches fließendes Rastergitter (fluid grid) basierend auf 960px erstellt. Rechenoperationen in Sass lassen uns sowas machen wie: Pixelwerte nehmen und diese ohne Schwierigkeiten in Prozentwerte umrechnen. Das generierte CSS sieht dann so aus:

.container {
  width: 100%;
}
 
article[role="main"] {
  float: left;
  width: 62.5%;
}
 
aside[role="complimentary"] {
  float: right;
  width: 31.25%;
}