Sass

Steht für „Syntactically Awesome Style Sheets“. Sass ist eine Erweiterung von Cascading Style Sheets (CSS), der Sprache, mit der das Layout und die Formatierung von HTML-Dokumenten festgelegt werden. Sass verwendet eine vollständig kompatible CSS-Syntax, bietet aber zusätzliche Funktionen wie CSS-Variablen und verschachtelte Regeln, die CSS effizienter und leichter zu bearbeiten machen.

Ein Nachteil von standardmäßigem CSS besteht darin, dass es keine Variablen unterstützt. Wenn Sie beispielsweise mehrere Stile mit derselben Farbe haben, müssen Sie die Farbe für jeden Stil einzeln festlegen. Wenn Sie die Farbe ändern möchten, müssen Sie sie für jedes Vorkommen im CSS-Dokument ändern. Mit Sass können Sie die Farbe als Variable definieren und die Variable jedem Stil zuweisen, der sie verwendet. Wenn Sie die Farbe ändern möchten, müssen Sie sie nur einmal ändern – an der Stelle, an der sie ursprünglich im Dokument definiert wurde.

Das folgende Beispiel zeigt, wie eine CSS-Variable in Sass definiert und verwendet wird.

  $myColor: #00695C;

  .pageTop { background-color: $myColor; }
  .infoText { color: $myColor; }
  .pageBottom { background-color: $myColor; }

Sass unterstützt außerdem verschachtelte Regeln, mit denen Entwickler effizienteren Code schreiben können. Im folgenden Beispiel ist die Klasse .button innerhalb des Stils #top p verschachtelt.

  #top p
  {
    color: #004D40;

    .button
    {
      background-color: #039BE5;
      color: #FFF;
    }
  }

Beim Kompilieren erzeugt der obige Code das folgende CSS:

  #top p { color: #004D40; }
  #top p .button { background-color: #039BE5; color: #FFF; }

Sass bietet Webentwicklern zwar mehrere Vorteile, Sass-Dokumente werden jedoch von Webbrowsern nicht erkannt. Daher muss eine Sass-Datei zuerst in CSS kompiliert werden, bevor sie in einem HTML-Dokument verwendet werden kann. Dies kann lokal geschehen, bevor das CSS mit Programmen wie Compass.app oder Koala auf den Webserver hochgeladen wird. Es kann auch auf dem Server mithilfe eines PHP- oder Ruby-Skripts kompiliert werden, das Sass in CSS umwandelt.