Setting Variables in Stylus

Unlike CSS, in Stylus you can assign expressions to variables that can be reusable throughout your stylesheets.

Let’s assume we had a set of colors that we’re going to be using throughout our document for headers, and text.

Stylus Code

When creating variables, you do not need to include the $ dollar symbol. I use it here, as it stands out more to me letting me know that it is in fact a variable based on how variables are defined in the programming language I use from day to day.

Stylus Output

This is awesome. Now we can set base colors, or anything really to manage from 1 area. This will also help us keep on track to make sure we’re sticking to our brand colors and styles.

We may also want to set sizes for our primary headers and paragraphs.

Stylus Code

Stylus Output

Property Lookup/Reference

Another amazing feature of Stylus is the ability of looking up a properties value without having to assign it to a variable. For instance, let’s assume we want to create a box and center it to the page.

Stylus Code

You’ll see above that I was able to reference the width and height by simply typing @width or @height. How cool is that?

Stylus Output