Stylus 0.4.0 released
Stylus for those who are not familiar with it, is a dynamic language which compiles down to css, written with JavaScript for node.js.
CSS Syntax Support
Previously Stylus only allowed the use of our indented grammar, which may deter designers that are not comfortable learning or using a new syntax. For this reason and to aid in copy/pasting of css stylesheets I have added support for optional semi-colons, colons, commas, and braces, this means that most css is valid.
Example
The example below is completely valid, showing the use of mixins within both our indentation-style usage, and our css-style usage.
vendor(prop, args)
-webkit-{prop} args
-moz-{prop} args
{prop} args
border-radius()
vendor('border-radius', arguments)
button
a.button
input[type=submit]
input[type=button]
border-radius 3px 5px
color black
&:hover
background black
color white
button,
a.button,
input[type=submit],
input[type=button] {
border-radius: 3px 5px;
color: black;
&:hover {
background: black;
color: white;
}
}
yielding:
button,
a.button,
input[type=submit],
input[type=button] {
color: #000;
-webkit-border-radius: 3px 5px;
-moz-border-radius: 3px 5px;
border-radius: 3px 5px;
}
button:hover,
a.button:hover,
input[type=submit]:hover,
input[type=button]:hover {
background: #000;
color: #fff;
}
button,
a.button,
input[type=submit],
input[type=button] {
color: #000;
-webkit-border-radius: 3px 5px;
-moz-border-radius: 3px 5px;
border-radius: 3px 5px;
}
button:hover,
a.button:hover,
input[type=submit]:hover,
input[type=button]:hover {
background: #000;
color: #fff;
}
This of course applies to use within mixins as well, using the indentation-style we may define the mixin as:
fade-to(to = .5)
&:hover
opacity to
button
fade-to(.1)
or with the css-style as:
fade-to(to = .5)
&:hover {
opacity: to;
}
button
fade-to(.1)
both yielding:
button:hover {
opacity: 0.1;
}
