Stylesheet-Sprache Sass bringt CSS Variablen bei

Wenn man das Programmieren erlernt, dann bekommt man es sofort mit Variablen zu tun. Und das auch aus gutem Grund. Besonders zu schätzen wusste ich zu Zeiten, als ich selbst noch regelmäßig programmierte, immer die globalen Variablen. Auf die war in aller Regel verlass. Da wusste man, wenn ich deren Wert an der Stelle, wo dieser zugewiesen wurde, verändere, dann kann ich sicher sein, dass das auch an allen Stellen, wo sie verwendet werden, ihre Wirkung zeigt. Bei der für das Web so immens wichtigen Stylesheet-Sprache CSS gibt es keine Variablen. Was mich schon immer gestört hat.

Darum (na gut, sicher auch noch aus anderen Gründen) verwenden einige Web-Entwickler Sass. Sass steht für Syntactically Awesome Stylesheets und ist im Prinzip eine syntaktische Vereinfachung von CSS, wie ein Beispiel zeigt, dass ich im zugehörigen Wikipedia-Artikel gefunden habe. Zunächst der Sass-Code:


!link_color = #00F
a
 :color = !link_color


Da seht ihr auch schon den Einsatz von Variablen in Sass. Und das wird daraus, wenn Sass nach dem Coden zu CSS-Code kompiliert wurde:

a {
 color: #00F
}


Sass wird in der Regel gemeinsam mit Haml (HTML Abstraction Markup Language) eingesetzt, was ihrerseits wieder eine in der Syntax vereinfachte Variante von HTML ist. Beide haben gemeinsam, dass die Sprachen nicht nur eine Vereinfachung der Syntax mit sich bringen, sondern auch noch ein paar andere nette Sachen. Bei Sass ist das z.B. das Nesting oder die Mixins. Nestings sind im Prinzip in Selektoren geschachtelte Unter-Selektoren, die bei herkömmlichem CSS unzusammenhängend auf gleicher Ebene im Code untergebracht wurden. Was meiner Ansicht nach alles andere als gut überschaubaren Code erzeugte. Mixins wiederum sind Code-Schnipsel, die man in seinem Code wiederverwenden kann, sogar mit der Möglichkeit Parameter zu übergeben. Obendrein kann man bei Sass auch die Eigenschaften bestimmtet Selektoren an andere vererben.

Alles in allem ein feine Sache, die vor allem das Schreiben von Stylesheet-Code eleganter und schlanker macht. Ambitionierte Entwickler stehen doch auf so etwas, oder?

Code, CSS, Language, Sass, Sprache, Stylesheet, Web-Entwicklung

28. Januar 2011
von Matthias Zellmer