Learning Stylus – A CSS Pre-Processor

How the content is displayed for this mini-series will be a little different to how you may see other articles on my site. Really this article is more geared as notes for me as I go through the documentation for Stylus, and learn the in’s and out’s of this beautiful language.

Feel free to reference the full documentation here.

One of the first cool things you’ll see is that the braces, colons, and semi-colons are all optional. This allows you to come up with your own style that works for you. The language is indentation-based or pythonic, so make sure to indent your code to stay away from any hidden surprises.

If you’re interested in learning how to setup your project to work with Stylus, you can check out my article here.

Like anything, to learn we need to dive in and start.