CSS/SASS

Sass (Syntactically Awesome Stylesheets) ist ein CSS Präprozessor, d. h. der Sass Code wird zu reinem CSS Code (in einer separaten Datei) kompiliert.

Worum geht's

Hinweis:

Da Sass ein Präprozessor für CSS ist, ersetzt es nicht die Notwendigkeit entsprechender CSS-Kenntnisse! Diese sind eine Grundvoraussetzung für die erfolgreiche Nutzung von Sass. Sollten Sie also noch nicht über ausreichende CSS-Kenntnisse verfügen, wird dringend empfohlen, sich diese zuerst anzueignen, bevor Sie sich mit Sass beschäftigen!

Ein anderer sehr bekannter Präprozessor ist beispielsweise PHP, denn PHP kann als Präprozessor für HTML angesehen werden (was auch in der heutigen Bedeutung des Namens, nämlich "Hypertext Preprocessor" drin steckt).

Sass an sich ist genau wie CSS eine sogenannte Stylesheet-Sprache.

Sass verfügt über zwei verschiedene Syntaxen:

1. Die originale/ ursprüngliche Syntax, auch "indented syntax" oder einfach nur "Sass" genannt, verwendet Einrückungen um Code Blöcke voneinander zu trennen, und Zeilenumbrüche um Zeilen voneinander abzugrenzen. Die standardmäßige Dateiendung lautet .sass.
2. Mit Version 3 von Sass wurde zusätzlich eine weitere Syntax eingeführt. Diese neue, "SCSS" genannte Syntax verwendet die bereits von CSS bekannten geschweiften Klammern zur Abgrenzung der einzelnen Code Blöcke, und Semikolons zur Abgrenzung der Zeilen innerhalb von Code Blöcken. Das bedeutet, dass jede gültige (syntaktisch korrekte) CSS3 Datei auch eine gültige Sass (.scss) Datei darstellt. Die standardmäßige Dateiendung lautet .scss.

Im Gegensatz zu CSS erlaubt Sass dem Autoren u. a. die Verwendung von

• verschachtelten Regeln
• Mixins
• Inline Importe (erlauben es innerhalb einer Sass/ SCSS Datei beliebig viele andere Sass/ SCSS Dateien zu importieren, die alle zu einer einzigen CSS Ausgabe-Datei zusammengefasst werden)

Was Sass jetzt aber für Stylesheet Autoren zusätzlich interessant macht ist, dass Sass auch noch über eine Skriptsprache SassScript verfügt. Sie erweitert Sass u. a. um Funktionen wie:

• Variablen
• Grundrechenarten
• Methoden zur Manipulation von Farbwerten
• Schleifenkonstrukte (for, each, while)
• Fallunterscheidungen (if, else)

Sass erweitert also die Möglichkeiten, wie Autoren ihre Stylesheets erstellen können, und erleichtert damit sowohl die Erstellung, als auch Änderungen und die Wartung.

So können Autoren anstatt eines komplexen Stylesheets dieses in mehrere kleinere und übersichtlichere Dateien aufteilen. Und auch die Erstellung eigener "wiederverwendbarer" Funktions-Bibliotheken und Konfigurations-Dateien ist möglich.

Es gibt auch bereits eine ganze Reihe zusätzlicher Bibliotheken für Sass.
Die wohl bekannteste Sass (Mixin-)Bibliothek derzeit dürfte wohl Compass sein.
Ein weiteres Beispiel ist Bourbon.

Die offizielle Version von Sass ist in Ruby programmiert und steht unter der MIT-Lizenz. Inzwischen gibt es auch Versionen in anderen Sprachen, so u. a. eine PHP Version und eine "high-performance" Version (libSass), die in C geschrieben ist.

Hinweis:

Einige der Features von SASS wurden bereits in natives CSS übernommen. So können Sie …

• mittlerweile CSS-Deklarationen verschachteln
• mit custom properties CSS-Variablen verwenden
• Auch die Verwendung von Mixins wird mit der @apply-Regel möglich.

Weblinks

• 456bereastreet.com: Why I don’t use CSS preprocessors
• dev.to: Is anyone really using SASS anymore?

Sass

• Sass Referenz (engl.)
• SassScript Funktionen (engl.)
• Sass bei Wikipedia (dt.)
• Sass bei Wikipedia (engl.)

Bibliotheken

• Compass
• Bourbon