I wrote this article originally for ADWE. This is a translation of the original article. Here is the link of the original publication.

Writing CSS code without a preprocessor today is a tough task, especially if we are developing a project of considerable size which must be optimised and easy to maintain and update. To help us in this task we have new tools which are helpful for save us work at the time when we write CSS. This results in greater comfort and speed in our work. There are many preprocessors at our disposal like LessSass (which Roman here has already talked about) or which I intend to dedicate this article today: Stylus.

How to start to use Stylus

To use this preprocessor it is necessary to install Node.js in our working environment. To do this we will have to download and install the corresponding version according our operative system.

Then we will have to install Stylus from our CLI, in the following way:

$ npm install -g stylus

With the prefix -g, we indicate that we want Stylus to work in any location of our computer.

If everything has gone well we will see the installation process in our CLI.

To start to work we will need a file with .styl extension which will be where we will write our CSS code without compiling and with the Stylus syntax. Regarding to this, the main problem we will have when we write CSS in a file with a different extension than a regular stylesheet it will be that the code will not be coloured in our favourite IDE.

To solve that I recommend you use SublimeText3 (for its versatility when it comes to installing extensions and plugins that make our work easier) and the Stylus syntax. There are many tutorial that explains how works the SublimeText2’s package and extensions manager so I invite you to use your great skills as trackers of the network that you have for sure.

Write CSS as naturally as possible

If it’s about continuing to write CSS as quickly and comfortably as possible, what if we forget the brackets, the colons and the semicolons that each CSS rule normally has?

Thanks to Stylus we will have the choice of write our stylesheet in this way:

Normal CSS:

body{
    background-color: blue;
    font-size: 1.2em;
    margin: 2em 5%;
}

Stylus CSS:

body
    margin 2em 5%
    font-size 1.2em
    background-color blue

To write a class is the same way without forgetting its prefix:

.wrapper
    width 100%
    max-width 1000px
    margin 0 auto

Another advantage of Stylus is the way it writes downward selectors as follows:

nav
    float left
    margin-right 2%
    ul
        list-style none
        li
            float left
            a
                background-color #333
                color white
                display block

Variables

We also have the choice of using variables to reuse them throughout our stylesheet, for example:

font-size = 14px

body
    font font-size Arial, sans-serif

This example could be extended as follows:

font-size = 14px
font = font-size ‘Open Sans’, Arial, sans-serif

body
    font font

Which would result in the following normal CSS:

body{
    font: 14px ‘Open Sans’, Arial, sans-serif;
}

Mixins

With the mixins we can create functions that will declare for us a series of predefined styles:

border-radius(a)
    -webkit-border-radius a
    -moz-border-radius a
    border-radius a

button.btn
    border-radius(10px)

CSS Result:

button.btn{
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    border-radius:10px;
}

Finally, I would like to explain how we have to compile this .styl file to convert it into a regular CSS file. To do this we will have to go to our command line and run the following code:

$ stylus -c style.styl

It is very important to keep in mind that we will have to move to the folder where the files to compile are located.

You’re probably wondering, what if I have to check several changes in a short time, I have to compile each time the file? The answer is no. To work in a much more fluid way and similar to writing a normal CSS file, we can add a prefix to the previous command and execute it:

$ stylus -c -w style.styl

In this way, Stylus will be in charge of watching for changes that will be made to this file and as soon as they are produced, it will be compiled so we will have the changes instantly.

And that’s all, in the next article we will see more things about this CSS preprocessor, as well as showing you an extension that will bring us a series of improvements (if you didn’t have enough with all this!).

Maybe you would like to leave a comment

The fields marked with an asterisk (*) are required.

Leave a Reply

There are no comments