Setting Up Stylus CSS Preprocessor

Setting Up Stylus CSS Preprocessor

CSS pre-processors like Sass, LESS and Stylus are popular because they allow you to write CSS in a custom syntax to later be compiled into the CSS that our browsers can parse. What's great about them is that they give us many new features that makes writing CSS more efficient and less painful.

The beauty about Stylus in particular is that it can be installed and used via Node and NPM, which most people already have installed. Fear not, if you don't, this tutorial includes that part too.

Let's get started!

Install Node and NPM

To install and run Stylus, we will need Node.js, a JavaScript runtime.

  1. Visit the official Node.js website to get the installer.
  2. After it downloads, run the installer until the end.
  3. Restart your computer to ensure the changes can take effect.
The Node.js installer.
The Node.js installer.

The Node.js installer should have also installed NPM for you. To confirm that you have installed both properly, you'll need to open Windows Command Prompt if you're on Windows, or Terminal if you're on Mac or Linux.

To check if you installed node:

    node -v

To check if you installed NPM:

    npm -v

If both of these commands return a version number, you're good to go.

Install Stylus and Set Up Project

Now that we have Node and NPM installed, we can move forward and install Stylus.

    npm install stylus -g

This command will install it on your computer globally so you can use it anywhere and with any project.

Before we compile our stylus files, let's first set up our folders. It is pretty common to have a stylus folder for your .styl files and a css folder for your .css files.

The project's structure.
The project's structure.

Of course, you could structure your project however you like, but we'll use that for this tutorial.

Compile Stylus files to CSS files

Inside your stylus folder, we'll create a index.styl file which we will then compile into index.css.

Run this command in the root folder:

    stylus stylus/index.styl -o css/
     compiled css\index.css

That compiles our stylus/index.styl file and outputs it in our css folder. That's what the -o option is for, the output location.

If your index.styl looked like this:

    .hello {
        .world {
            background-color: red;

The output in index.css would look like this:

    .hello .world {
      background-color: #f00;

Stylus Watcher

A watcher is really useful because instead of having to use the compile command every single time you want the compiled css files, you can run the watcher command which will watch your files for any changes and then automatically compile them for you.

Creating a watcher is as easy as appending the -w option to the command.

    stylus -w stylus/index.styl -o css/
    compiled css\index.css
    watching stylus/index.styl

Stylus Compress

Compressing your CSS files will render them difficult to read for humans but reduces the sizes of them. This is useful for when you are working on a website that you plan to make public for others to use. The smaller the files, the less data that needs to be transmitted.

Compressing the output is as simple as applying the -c option.

    stylus -w -c stylus/index.styl -o css/
    compiled css\index.css
    watching stylus/index.styl

By compressing it, your index.css would look like this:

    .hello .world{background-color:#f00}

Stylus is an awesome CSS preprocessor that is simple to install and offers a wide range of features. It's fun to use to write CSS and hopefully this tutorial has helped you get started using it!


If you learned from this tutorial, please consider supporting us! Follow us on Facebook, Twitter and LinkedIn! ๐Ÿ˜Š Also, join the conversation over at our official Discord!