Stylus (Stylesheet-Sprache)

aus Wikipedia, der freien Enzyklopädie
Wechseln zu: Navigation, Suche
Stylus
Stylus.svg
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[Bearbeiten | Quelltext bearbeiten]

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[Bearbeiten | Quelltext 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 folgenden CSS-Code kompiliert:

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

Variablen[Bearbeiten | Quelltext 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 | Quelltext bearbeiten]

Mit Mixins bzw. Funktionen müssen wiederholt-vorkommende Abläufe wie die Angabe unterschiedlicher Herstellerpräfixe nur 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[Bearbeiten | Quelltext 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 | Quelltext bearbeiten]

Neben der Verwendung in Node.js existieren weitere Module, z. B. für Grunt[4] oder für das Webframework Ruby on Rails.[5]

Siehe auch[Bearbeiten | Quelltext bearbeiten]

Literatur[Bearbeiten | Quelltext bearbeiten]

Weblinks[Bearbeiten | Quelltext bearbeiten]

Einzelnachweise[Bearbeiten | Quelltext bearbeiten]

  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).