Preface
Goal: An example of Stylus, CSS preprocessor for beginner.
Here, I represent you,a cool template stack: Pug+Stylus+Coffeescript
.
- HTML: Pug
- CSS: Stylus
- 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.
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
.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.
What’s Next?
Consider continue reading [ Tools - Javascript - Coffescript ].