Stylus

A simple overview about stylus

Stylus is a dynamic stylesheet preprocessor language that is compiled into Cascading Style Sheets. Its design is influenced by Sass and LESS.

Installation process in node js

$ npm install stylus -g

How to import stylus in vue js
import ‘<file location>/<filename.styl>’

Block level import

Stylus supports block-level import. It means that you can use @import not only at root level, but also nested inside other selectors or at-rules.

If you have a foo.styl with this code:

.foo
  width: 10px

Then you can import it inside a bar.styl like this:

.bar
  @import 'foo.styl'
@media screen and (min-width: 640px) {
  .bar {
    width: 10px;
  }
}

Features

Optional colons
Optional semi-colons
Optional commas
Optional braces
Variables
Interpolation
Mixins
Arithmetic
Type coercion
Dynamic importing
Conditionals
Iteration
Nested selectors
Parent referencing
Variable function calls
Lexical scoping
Built-in functions (over 60)
In-language functions
Optional compression
Optional image inlining
Stylus executable
Robust error reporting
Single-line and multi-line comments
CSS literal for those tricky times
Character escaping
TextMate bundle
and more..

Example of stylus with conversion of css

css file

body {
font: 12px Helvetica, Arial, sans-serif;
}
a.button {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

Stylus

body
font: 12px Helvetica, Arial, sans-serif

a.button
-webkit-border-radius: 5px
-moz-border-radius: 5px
border-radius: 5px

Here stylus file doesn't contains semicolons and braces that can be ignored