Stylus (Stylesheet-Sprache)
| Stylus | |
|---|---|
| colspan="2" class="notheme" style="text-align:center; background-color:#Vorlage:Standardfarbe;" | Datei:Stylus-logo.svg | |
| Basisdaten | |
| Erscheinungsjahr: | 2011 |
| Designer: | Lua-Fehler in Modul:Wikidata, Zeile 1703: attempt to index field 'wikibase' (a nil value) |
| Entwickler: | LearnBoost |
| Aktuelle Version: | 0.54.5<ref>Releases. In: GitHub. Abgerufen am 8. Mai 2016 (Lua-Fehler in Modul:Multilingual, Zeile 153: attempt to index field 'data' (a nil value)).</ref> (28. April 2016) |
| Typisierung: | Dynamisch |
| Beeinflusst von: | CSS, Sass, Less |
| Betriebssystem: | plattformübergreifend |
| Lizenz: | MIT-Lizenz<ref>LICENSE. In: GitHub. Abgerufen am 13. Februar 2016 (Lua-Fehler in Modul:Multilingual, Zeile 153: attempt to index field 'data' (a nil value)).</ref> |
| 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[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.<ref>Mixins. In: stylus-lang.com. Abgerufen am 13. Februar 2016 (Lua-Fehler in Modul:Multilingual, Zeile 153: attempt to index field 'data' (a nil value)).</ref>
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. <syntaxhighlight lang="css"> body
font-size 14px background-color white color black
</syntaxhighlight> Dies wird zu folgendem CSS-Code kompiliert: <syntaxhighlight lang="css"> body {
font-size: 14px; background-color: white; color: black;
} </syntaxhighlight>
Variablen[Bearbeiten]
Um Wiederholungen zu vermeiden, können in Stylus Variablen verwendet werden. <syntaxhighlight lang="css"> meineFarbe = #0033ff header
background-color meineFarbe
h1
color meineFarbe
a
color meineFarbe
</syntaxhighlight> Was kompiliert wird zu: <syntaxhighlight lang="css"> header {
background-color: #0033ff;
} h1 {
color: #0033ff;
} a {
color: #0033ff;
} </syntaxhighlight>
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.<ref>Vergleiche Can I use... CSS3 Border-radius (rounded corners) oder ohne Zeitangabe direkt in den MDN Web Docs, siehe border-radius - browser compatibility.</ref> Die Varianten mit Präfix sind seitdem wirkungslos.
<syntaxhighlight lang="css"> border-radius()
-webkit-border-radius arguments -moz-border-radius arguments border-radius arguments
- bild
border-radius 8px
.button
border-radius 3px
</syntaxhighlight> Das Ergebnis: <syntaxhighlight lang="css">
- bild {
-webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px;
} .button {
-webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;
} </syntaxhighlight>
Geschachtelte Regeln[Bearbeiten]
Hiermit können Selektoren ineinander verschachtelt werden. <syntaxhighlight lang="css">
- header
background-color blue h1 color white font-weight bold p font-size 14px
- footer
background green
</syntaxhighlight> wird kompiliert zu: <syntaxhighlight lang="css">
- header {
background-color: blue;
}
- header h1 {
color: white; font-weight: bold;
}
- header p {
font-size: 14px;
}
- footer {
background: green;
} </syntaxhighlight>
Verwendung[Bearbeiten]
Neben der Verwendung in Node.js existieren weitere Module, z. B. für Grunt<ref>grunt-contrib-stylus. In: GitHub. Abgerufen am 13. Februar 2016 (Lua-Fehler in Modul:Multilingual, Zeile 153: attempt to index field 'data' (a nil value)).</ref> oder für das Webframework Ruby on Rails.<ref>ruby-stylus. In: GitHub. Abgerufen am 13. Februar 2016 (Lua-Fehler in Modul:Multilingual, Zeile 153: attempt to index field 'data' (a nil value)).</ref>
Siehe auch[Bearbeiten]
Literatur[Bearbeiten]
- Golo Roden: Node.js & Co. dpunkt.verlag, 2012, ISBN 978-3-89864-829-5.
Weblinks[Bearbeiten]
Einzelnachweise[Bearbeiten]
<references />