What is Stylus?

Stylus is an innovative style-sheet language that compiles down to CSS. Inspired by SASS, Stylus is built with node.js and capable of running in the browser.

What that means practically is that CSS turns to a modular language which supports variables and mixins (functions) and that is every front-end designers dream. So, in plain language you can completely change the looks of the webpage in only changing a few variables. Are you excited yet ? 🙂

What did Stylus help me solve ?


For one project I needed to create 20 shades of gradient of 8 colors. In old times, this would be a very time consuming and boring task (write 160 CSS classes by hand), as you would go to the graphic program, create a specific color gradient and with a color-picker choose and copiy all the colors as hex values in your CSS file classes.

The quick “1 minute” solution

shades_generator(color, value)
    for i in 20..0
      border-radius 3px
      var1 = (100-(i*5))+'%'
      background lighten(color, var1)
      background alpha(color, ((i)/20))

Note to the code: in stylus you have to indent your code with tabs. When you copy this, just create a variable before the function – for example: “color_1 = #ff6600” and run it after the function: “shades_generator(color_1, 1)” – value “1” here represent only the prefix then naming the classes

This simple loop would then preprocess 160 static CSS classes with different shades (background css property). If I needed a different color, I would simply change the variable or if I needed 100 or 1000 different shades, no problem – scale here doesn’t matter, since this is a stylus function and options become unlimited.

Welcome to the brave new world of preprocessors

I will be writing about Stylus more, so tune in.