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.
Syntax 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 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 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 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.Vergleiche Can I use... CSS3 Border-radius (rounded corners) oder ohne Zeitangabe direkt in den MDN Web Docs, siehe border-radius - browser compatibility. 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 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 Neben der Verwendung in Node.js existieren weitere Module, z. B. für Grunt oder für das Webframework Ruby on Rails.
Siehe auch Sass (Stylesheet-Sprache) Less (Stylesheet-Sprache)
Literatur Golo Roden: Node.js & Co. dpunkt.verlag, 2012, ISBN 978-3-89864-829-5.
Weblinks Offizielle Website Stylus – die Stylesheet-Sprache für Node.js Quellcode auf GitHub Node.js npm
Einzelnachweise
Kategorie:Cascading Style Sheets Kategorie:Stylesheet-Sprache Kategorie:Datenformat Kategorie:Node.js