Sass (Stylesheet-Sprache)
| Sass | |
|---|---|
| Dateiendung: | .sass |
| Entwickelt von: | Hampton Catlin (Design), Nathan Weizenbaum, Chris Eppstein |
| Erstveröffentlichung: | 2007 |
| Aktuelle Version: | 3.1.16 (Stand: 2012-04-20) |
| Art: | Auszeichnungssprache |
| Website: | http://sass-lang.com/ sass-lang.com |
Sass (Syntactically Awesome Stylesheets) ist eine Stylesheet-Sprache, die ursprünglich von Hampton Catlin entworfen und von Nathan Weizenbaum entwickelt wurde. Sie wird am besten als Meta-Sprache für CSS beschrieben, was bedeutet, dass CSS-Code abstrahiert wird, um einfachere Stylesheet-Dateien zu kreieren. Nach der Fertigstellung der initialen Version haben Nathan Weizenbaum und Chris Eppstein die Arbeit zur Erweiterung von Sass fortgesetzt und SassScript, eine einfache Scriptsprache zum Gebrauch innerhalb von Sass-Dateien, hinzugefügt. Sass wird üblicherweise gemeinsam mit Haml eingesetzt und ist von CSS, YAML und Haml beeinflusst. Die Software ist für viele Plattformen verfügbar und wird unter der MIT Lizenz verbreitet.
Inhaltsverzeichnis |
[Bearbeiten] Merkmale
[Bearbeiten] Geschachtelte Regeln
Eines der Schlüsselmerkmale sind verschachtelte Regeln (nested rules). Durch diese ist es einfach, komplizierte geschachtelte Selektoren zu lesen und zu schreiben.
#header
background: #FFFFFF
/* -or- :background #FFFFFF
.error
color: #FF0000
a
text-decoration: none
&:hover
text-decoration: underline
Dies wird kompiliert zu:
#header {
background: #FFFFFF;
}
#header .error {
color: #FF0000;
}
#header a {
text-decoration: none
}
#header a:hover {
text-decoration: underline
}
[Bearbeiten] Nutzung von Variablen
Sass fügt Konstanten und Mixins zu CSS hinzu. Dies erleichtert es, Werte über eine größere Menge von Styles konsistent zu halten. Konstanten erlauben es, einen Wert zu setzen und in allen Styles zu verwenden, während Mixins diese Idee für einen Block von Style-Attributen umsetzen.
$link_color: #00F a :color = $link_color
Wird kompiliert zu
a {
color: #00F
}
[Bearbeiten] SCSS Syntax
Neben der oben beschriebenen SASS-Syntax verfügt SASS über die neuere, und heute weiter verbreitete SCSS-Syntax. Hier ist für die Verschachtelung der Selektoren nicht die Einrückung des Quelltextes ausschlaggebend, sondern wie in der 'klassischen' CSS-SChreibweise die geschweiften Klammern. Weiterhin sind auch Semikolons am Ende von Regeln wieder nötig.
[Bearbeiten] Codevergeleich
[Bearbeiten] SASS
$meineFarbe: #3bbfce .navigation border-color: $meineFarbe color: darken($meineFarbe, 9%)
[Bearbeiten] SCSS
$meineFarbe: #3bbfce;
.navigation {
border-color: $meineFarbe;
color: darken($meineFarbe, 9%);
}
Das kompilierte CSS ist in beide Fällen identisch.
[Bearbeiten] Kritik
Die Nutzung einer Metasprache für CSS ist nicht unumstritten. Kritisiert wird das erschwerte Debugging sowie das Erweitern potenzieller Fehlerquellen. Auch könne der Kaskadierungsgedanke von CSS verloren gehen, der mit der Vergabe von Klassen gegeben ist. Ebenfalls ist innerhalb der SASS-Datei nicht immer ein Unterschied zwischen regulären CSS-Klassen und Mixins zu erkennen [1].
[Bearbeiten] Weblinks
- Official Sass website (englisch)
- Sass source code repository (Git) (englisch)
- Haml/Sass Google Group (englisch)
- [1] Kritik an CSS-Frameworks
[Bearbeiten] Einzelnachweise
- ↑ Über den (Un)Sinn von CSS Frameworks. Abgerufen am 21. Mai 2011.
