What is Stylus CSS Preprocessor?

What is Stylus?

Stylus is a CSS preprocessor known for its extremely flexible, minimal syntax — braces, colons, and semicolons are all optional.

Minimal Syntax

// All of these are optional: { } : ;
primary = #2563eb

.button
  background primary
  padding 10px 20px
  border-radius 6px

You Can Also Write CSS-Like

.button {
  background: primary;
  padding: 10px 20px;
}

Variables (no special character)

font-size = 16px
body
  font font-size sans-serif

Why Use Stylus?

• Cleanest, least verbose syntax of all preprocessors.
• Powerful built-in functions.
• Popular in the Node/Express ecosystem.

FAQs

Stylus vs SCSS?

Stylus is more flexible but less popular; SCSS has a bigger community. More in our Stylus guides.

Is Stylus still maintained?

Yes, though SCSS dominates. It's great if you love minimal syntax.