Sass (Stylesheet-Sprache)

aus Wikipedia, der freien Enzyklopädie
Wechseln zu: Navigation, Suche
Sass
Sass-Logo
Basisdaten
Erscheinungsjahr: 2007
Designer: Hamptom Catlin
Entwickler: Nathan Weizenbaum, Chris Eppstein
Aktuelle Version: 3.3.9  (27.Juni 2014)
Beeinflusst von: CSS, YAML
Beeinflusste: LESS, Stylus
Betriebssystem: Plattformunabhängig
Lizenz: MIT-Lizenz
sass-lang.com

Sass (Syntactically Awesome Stylesheets) ist eine Stylesheet-Sprache, die als Präprozessor die Erzeugung von Cascading Stylesheets erleichtert. Sie wurde ursprünglich beeinflusst von der Auszeichnungssprache YAML, von Hampton Catlin entworfen und von Nathan Weizenbaum entwickelt.

Nach der Fertigstellung der initialen Version setzte Weizenbaum zusammen mit Chris Eppstein die Arbeit an Sass fort und implementierte mit SassScript eine einfache Scriptsprache zum Gebrauch innerhalb von Sass-Dateien. Neben der unter MIT License für viele Plattformen verfügbaren kommandozeilenbasierten Compilersoftware haben sich weitere Verarbeitungsprogramme etabliert.

Merkmale[Bearbeiten]

Geschachtelte Regeln[Bearbeiten]

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
}

Geschachtelte Media Queries[Bearbeiten]

Eine besondere Funktion stellt die Verschachtelung von Media Queries in Selektoren dar. So können im Quellcode Style-Deklarationen für ein und dasselbe Element am gleichen Ort verwaltet werden.

#header{
  color: red
  @media (min-width: 400px){
    color: blue;
  }
}

Dies wird kompiliert zu:

#header {
  color: red;
}
@media (min-width: 400px){
    #header {
      color: blue;
    }
  }

Variablen[Bearbeiten]

Sass erlaubt die Nutzung von Variablen. Dies erleichtert es, bestimmte Werte in umfangreichen Stylesheets konsistent zu halten. Wartungsaufgaben werden durch die Definition der Variablen an zentraler Stelle erheblich vereinfacht.

$link_color: #00F
 
a
  color: $link_color

Wird kompiliert zu

a {
  color: #00F
}

Mixins[Bearbeiten]

Mixins erlauben die wiederholte Referenzierung ganzer Code-Abschnitte. In Anlehnung an die in klassischen Programmiersprachen vorhandenen Funktionen können Mixins auch Argumente übergeben werden. Mixins können, wie normale Anweisungen auch, weitere geschachtelte Selektoren enthalten. Im folgenden Beispiel wird die Variable $color im Mixin dem Element als Hintergrundfarbe zugewiesen.

@mixin box($color){
  padding: 1rem;
  border: 2px solid gray;
  background: $color;
}
 
a 
  @include box(red);

Wird kompiliert zu

a {
  padding: 1rem
  border: 2px solid gray
  background: red
}

SCSS-Syntax[Bearbeiten]

Neben der oben beschriebenen Sass-Syntax (indented syntax) verfügt Sass über die neuere, und heute weiter verbreitete SCSS-Syntax (Sassy CSS). 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.

Codevergleich[Bearbeiten]

Sass[Bearbeiten]

$meineFarbe: #3BBFCE
 
.navigation
  border-color: $meineFarbe
  color: darken($meineFarbe, 9%)

SCSS[Bearbeiten]

$meineFarbe: #3BBFCE;
 
.navigation {
  border-color: $meineFarbe;
  color: darken($meineFarbe, 9%);
}

Das kompilierte CSS ist in beiden Fällen identisch. Eine automatische Umwandlung zwischen den beiden Syntax-Varianten ist ohne Probleme möglich.

Kritik[Bearbeiten]

Die Nutzung einer Metasprache für CSS ist umstritten. 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]

Siehe auch[Bearbeiten]

Weblinks[Bearbeiten]

Einzelnachweise[Bearbeiten]

  1. Über den (Un)Sinn von CSS Frameworks. Abgerufen am 21. Mai 2011.