Stylus is an innovative stylesheet language that compiles down to CSS. Inspired by SASS, Stylus is built with node.js and capable of running in the browser as this interactive tutorial illustrates. Edit the Stylus source on the left to see the resulting changes appear to the CSS on the right.
Selector nesting enables you to keep your styles DRY:
Semi-colons, colons, and braces are optional:
The parent reference operator inspired by SASS is also available:
Stylus mixins allow you to define reusable functionality by defining in-language functions which can be called from within blocks:
Transparent mixins are unique to Stylus, and are a incredibly powerful way enhance your stylesheets. Here all the arguments passed are simply assigned to three properties. Note that parenthesis are not required, making it easy to provide cross-browser support to properties like opacity, border-radius, and even gradients.
Stylus variables behave as you would expect in any other language, and may optionally be prefixed by the "$" character:
Block property access
Stylus property access provides easy access to values defined within the current block. Simply prefix the name of the property with "@" to reference the value.
Robust feature-rich language
Stylus is not just a pre-processor, it's is a flexible and powerful language. Combined with the concept of transparent mixins you can create robust cross-browser support, or simply making your life easier with customized CSS properties as shown below:
List iteration with Stylus is simple:
Interpolation combined with other powerful features allow you to mold properties and selectors all within the language itself.
Stylus supports all the operators you've come to expect from a language, as well as some specific to Stylus.
Stylus performs type coercion when appropriate, and supports all of the unit types you've come to know and love.
The sprintf operator
The powerful "%" operator when used with strings behaves like sprintf, which each argument compiled through the stylus compiler, producing a literal value.
Operations against colors are especially useful. When adding or subtracting by a percentage the color lightness may be adjusted, or adjust the hue with deg:
Stylus functions may be defined in the same manner as mixins, however their usage differs as they return values. For example you could define a sum function as shown below:
Keyword arguments are also supported to make function invocation more expressive, also allowing you to disregard argument ordering.
Stylus is packed with over 40 built-in functions for manipulating colors, checking variable types, math, list operations, and more, many of which are defined in the Stylus language itself.
The Color built-in functions allow you adjust lightness, hue, and saturation, check if colors are light or dark and more.
That's it for now! to view the rest of the powerful features Stylus provides click "View Documentation" in the corner.