Stylus ist eine Stylesheet-Sprache mit dem Ziel, das Schreiben von CSS effizienter zu gestalten. Der Stylus-Quellcode wird serverseitig zu CSS kompiliert. Der Compiler ist in JavaScript für die Plattform Node.js geschrieben.
| Stylus | |
|---|---|
| Basisdaten | |
| Erscheinungsjahr: | 2011 |
| Entwickler: | LearnBoost |
| Aktuelle Version: | 0.54.5 (28. April 2016) |
| Typisierung: | Dynamisch |
| Beeinflusst von: | CSS, Sass, Less |
| Betriebssystem: | plattformübergreifend |
| Lizenz: | MIT-Lizenz |
| stylus-lang.com |
Syntax Bearbeiten
Die Syntax von Stylus ist minimal gehalten – geschweifte Klammern, Semikolons und Doppelpunkte werden nicht benötigt. Im Gegensatz zu den anderen Stylesheet-Sprachen SASS/SCSS und Less ist im Quellcode ein Unterschied zwischen CSS-Klassen und Mixins erkennbar.
Codebeispiele Bearbeiten
Anstelle der für CSS typischen geschweiften Klammern verwendet Stylus Einrückungen, um die Eigenschaften dem Selektor zuzuordnen. Doppelpunkte und Semikolons sind optional.
body font-size 14px background-color white color black Dies wird zu folgendem CSS-Code kompiliert:
body { font-size: 14px; background-color: white; color: black; } Variablen Bearbeiten
Um Wiederholungen zu vermeiden, können in Stylus Variablen verwendet werden.
meineFarbe = #0033ff header background-color meineFarbe h1 color meineFarbe a color meineFarbe Was kompiliert wird zu:
header { background-color: #0033ff; } h1 { color: #0033ff; } a { color: #0033ff; } Mixins Bearbeiten
Mit Mixins bzw. Funktionen müssen wiederholt-vorkommende Abläufe wie die Angabe unterschiedlicher Herstellerpräfixe nur einmal geschrieben werden.
Anmerkung: Das konkrete Beispiel mit -x-border-radius ist seit 2014 veraltet. Die Varianten mit Präfix sind seitdem wirkungslos.
border-radius() -webkit-border-radius arguments -moz-border-radius arguments border-radius arguments #bild border-radius 8px .button border-radius 3px Das Ergebnis:
#bild { -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } .button { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } Geschachtelte Regeln Bearbeiten
Hiermit können Selektoren ineinander verschachtelt werden.
#header background-color blue h1 color white font-weight bold p font-size 14px #footer background green wird kompiliert zu:
#header { background-color: blue; } #header h1 { color: white; font-weight: bold; } #header p { font-size: 14px; } #footer { background: green; } Verwendung Bearbeiten
Neben der Verwendung in Node.js existieren weitere Module, z. B. für Grunt oder für das Webframework Ruby on Rails.
Siehe auch Bearbeiten
Literatur Bearbeiten
- Golo Roden: Node.js & Co. dpunkt.verlag, 2012, ISBN 978-3-89864-829-5.
Weblinks Bearbeiten
Einzelnachweise Bearbeiten
- Releases. In: GitHub. Abgerufen am 8. Mai 2016 (englisch).
- LICENSE. In: GitHub. Abgerufen am 13. Februar 2016 (englisch).
- Mixins. In: stylus-lang.com. Abgerufen am 13. Februar 2016 (englisch).
- Vergleiche Can I use... CSS3 Border-radius (rounded corners) oder ohne Zeitangabe direkt in den MDN Web Docs, siehe border-radius - browser compatibility.
- grunt-contrib-stylus. In: GitHub. Abgerufen am 13. Februar 2016 (englisch).
- ruby-stylus. In: GitHub. Abgerufen am 13. Februar 2016 (englisch).