Where to Discuss?

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:

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


Stylus

Official Documentation

Install

$ npm i -g stylus

Simple Source

Consider this indented document styles as below:

.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.

Stylus: Stylus Source Code

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

Stylus: Stylus Command Line

And the result would be a simple CSS code as below

.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;
}

Stylus: CSS result

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.


What’s Next?

Consider continue reading [ Tools - Javascript - Coffescript ].