Introduction

Stylus is a CSS preprocessor—a tool for generating CSS in a more efficient and dynamic manner. It comes with a logical syntax for generating CSS style definition blocks, and a programming language to make the CSS generation process very dynamic.

Note

Although, we cover most aspects of Stylus in this chapter, for a complete coverage of the topic visit the official website at http://learnboost.github.io/stylus/.

Stylus files have a .styl file extension. The contents of these files are parsed and converted to CSS code when the corresponding .css file is requested by a user agent.

Stylus CSS syntax isn't very different from regular CSS. In fact, regular CSS language is valid Stylus too, because Stylus is a superset of CSS. All Stylus does is add some dynamic capabilities to the plain old CSS. However, colons, semicolons, commas, and braces are optional in Stylus.

A very important difference between CSS and Stylus is that whitespace is significant in Stylus. In fact, we use indentation...