Tools - CSS - Stylus

Preface

Goal: An example of Stylus, CSS preprocessor for beginner.

Here, I represent you,a cool template stack: Pug+Stylus+Coffeescript.

1. HTML: Pug
2. CSS: Stylus
3. Javascript: Coffeescript

Source Examples

You can obtain source examples here:

• html-basic/03-template

Let’s get it on. Start with a CSS preprocessor called Stylus.

Stylus

Official Documentation

• stylus-lang.com

Install

$ npm i -g stylus

Simple Source

Consider this indented document styles as below:

• gitlab.com/…/style.styl.

.red
  color: #fff !important
  background-color: #f44336 !important

.yellow
  color: #000 !important
  background-color: #ffeb3b !important

.green
  color: #fff !important
  background-color: #4CAF50 !important

.blue
  color: #fff !important
  background-color: #2196F3 !important

It is very similar with CSS, but without curly braces, nor semicolon.

Command Line

Now you can run this command:

$ stylus -w css/style.styl -o css/style.css
  watching /home/epsi/.npm-global/lib64/node_modules/stylus/lib/functions/index.styl
  compiled css/style.css
  watching css/style.styl

And the result would be a simple CSS code as below

• gitlab.com/…/style.css.

.red {
  color: #fff !important;
  background-color: #f44336 !important;
}
.yellow {
  color: #000 !important;
  background-color: #ffeb3b !important;
}
.green {
  color: #fff !important;
  background-color: #4caf50 !important;
}
.blue {
  color: #fff !important;
  background-color: #2196f3 !important;
}

Finally

This article is intended a brief overview for beginner. From this, you can step on to other preprocessor. I won’t go deep with Stylus in this article series. I have another article series, contain SASS, LESS, and PostCSS.

Internal Stylus in Pug

This topic has been discussed in previous article.

• Tools - HTML - Pug

What’s Next?

Consider continue reading [ Tools - Javascript - Coffescript ].