Stylus (Stylesheet-Sprache)

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[1]  (28. April 2016)
Typisierung: Dynamisch
Beeinflusst von: CSS, Sass, Less
Betriebssystem: plattformübergreifend
Lizenz: MIT-Lizenz[2]
stylus-lang.com

Syntax

Die Syntax v​on Stylus i​st minimal gehalten – Geschweifte Klammern, Semikola u​nd Doppelpunkte werden n​icht benötigt. Im Gegensatz z​u den anderen Stylesheet-Sprachen SASS/SCSS u​nd Less i​st im Quellcode e​in Unterschied zwischen CSS-Klassen u​nd Mixins erkennbar.[3]

Codebeispiele

Anstelle d​er für CSS typischen geschweiften Klammern verwendet Stylus Einrückungen, u​m die Eigenschaften d​em Selektor zuzuordnen. Doppelpunkte u​nd Semikolons s​ind optional.

body
  font-size 14px
  background-color white
  color black

Dies w​ird zu folgendem CSS-Code kompiliert:

body{
  font-size: 14px;
  background-color: white;
  color: black;
}

Variablen

Um Wiederholungen z​u vermeiden, können i​n Stylus Variablen verwendet werden.

meineFarbe = #0033ff
header
  background-color meineFarbe
h1
  color meineFarbe
a
  color meineFarbe

Was kompiliert w​ird zu:

header{
  background-color: #0033ff;
}
h1{
  color: #0033ff;
}
a{
  color: #0033ff;
}

Mixins

Mit Mixins bzw. Funktionen müssen wiederholt-vorkommende Abläufe w​ie die Angabe unterschiedlicher Herstellerpräfixe n​ur einmal geschrieben werden.

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 d​er Verwendung i​n Node.js existieren weitere Module, z. B. für Grunt[4] o​der für d​as Webframework Ruby o​n Rails.[5]

Siehe auch

Literatur
  • Golo Roden: Node.js & Co. dpunkt.verlag, 2012, ISBN 978-3-89864-829-5.

Einzelnachweise
  1. Releases. In: GitHub. Abgerufen am 8. Mai 2016 (englisch).
  2. LICENSE. In: GitHub. Abgerufen am 13. Februar 2016 (englisch).
  3. Mixins. In: stylus-lang.com. Abgerufen am 13. Februar 2016 (englisch).
  4. grunt-contrib-stylus. In: GitHub. Abgerufen am 13. Februar 2016 (englisch).
  5. ruby-stylus. In: GitHub. Abgerufen am 13. Februar 2016 (englisch).
This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. The authors of the article are listed here. Additional terms may apply for the media files, click on images to show image meta data.