Stylus Syntax Explained

Stylus's Flexible Syntax

Stylus uniquely lets you omit braces, colons, and semicolons — using indentation instead, like Python.

Three Valid Styles

// 1. Fully minimal
.box
  color red
  padding 10px

// 2. With colons
.box
  color: red
  padding: 10px

// 3. Full CSS
.box {
  color: red;
  padding: 10px;
}

Variables

primary = #2563eb
sizes = 8px 16px 24px

.btn
  background primary
  padding sizes[1]   // 16px

Mixins

border-radius(n)
  border-radius n
  -webkit-border-radius n

.card
  border-radius(10px)

Conditionals

.box
  if primary
    color primary
  else
    color black

FAQs

Is indentation required?

If you omit braces, yes — indentation defines blocks. More in our Stylus section.

Can I mix syntax styles?

Yes — Stylus is very forgiving, but consistency is best.