Stylus (stylesheet language)

Stylus
Basic data
Publishing year:	2011
Developer:	LearnBoost
Current version :	0.54.5 (April 28, 2016)
Typing :	Dynamic
Influenced by:	CSS , Sass , Less
Operating system :	cross-platform
License :	MIT license
	stylus-lang.com

Stylus is a stylesheet language with the goal of making writing CSS more efficient. The Stylus source code is compiled to CSS on the server side . The compiler is written in JavaScript for the Node.js platform .

syntax

The syntax of Stylus is kept to a minimum - Braces , semicolons and colons are not needed. In contrast to the other stylesheet languages SASS / SCSS and Less , a difference between CSS classes and mixins can be seen in the source code .

Code samples

Instead of the curly braces typical of CSS, Stylus uses indentations to assign the properties to the selector. Colons and semicolons are optional.

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

This is compiled into the following CSS code:

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

variables

Variables can be used in the stylus to avoid repetition .

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

What is compiled to:

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

Mixins

With mixins or functions, repeated processes such as the specification of different manufacturer prefixes only have to be written once.

border-radius()
  -webkit-border-radius arguments
  -moz-border-radius arguments
  border-radius arguments
#bild
  border-radius 8px
.button
  border-radius 3px

The result:

#bild{
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  border-radius: 8px;
}
.button{
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

Nested rules

This allows selectors to be nested within one another.

#header
  background-color blue
  h1
    color white
    font-weight bold
  p
    font-size 14px
#footer
  background green

is compiled to:

#header{
  background-color: blue;
}
#header h1{
    color: white;
    font-weight: bold;
}
#header p{
    font-size: 14px;
}
#footer{
  background: green;
}

use

In addition to the use in Node.js, there are other modules , e.g. B. for Grunt or for the Ruby on Rails web framework .

literature

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

Web links

Individual evidence

↑ Releases. In: GitHub . Retrieved May 8, 2016 .
↑ LICENSE. In: GitHub . Retrieved February 13, 2016 .
↑ Mixins. In: stylus-lang.com . Retrieved February 13, 2016 .
↑ grunt-contrib-stylus. In: GitHub . Retrieved February 13, 2016 .
^ Ruby stylus. In: GitHub . Retrieved February 13, 2016 .

[1] Releases. In: GitHub . Retrieved May 8, 2016 .

[2] LICENSE. In: GitHub . Retrieved February 13, 2016 .

[3] Mixins. In: stylus-lang.com . Retrieved February 13, 2016 .

[4] grunt-contrib-stylus. In: GitHub . Retrieved February 13, 2016 .

[5] Ruby stylus. In: GitHub . Retrieved February 13, 2016 .