Stylus (Stylesheet-Sprache)
| Stylus | |
|---|---|
| |
| Basisdaten | |
| Erscheinungsjahr: | 2011 |
| Entwickler: | LearnBoost |
| Aktuelle Version: | 0.54.5[1] (28. April 2016) |
| Typisierung: | Dynamisch |
| Beeinflusst von: | CSS, Sass, Less |
| Betriebssystem: | plattformübergreifend |
| Lizenz: | MIT-Lizenz[2] |
| stylus-lang.com | |
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, Semikola 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.[3]
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.[4] 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[5] oder für das Webframework Ruby on Rails.[6]
Siehe auch
Literatur
- Golo Roden: Node.js & Co. dpunkt.verlag, 2012, ISBN 978-3-89864-829-5.
Weblinks
Einzelnachweise
- ↑ 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).