Online Stylus Compiler and Playground

An online Stylus compiler for exploring the syntax

Stylus is the preprocessor with the least punctuation: colons, semicolons and braces are all optional, and variables need no prefix. That freedom is easiest to understand by experimenting. This online Stylus compiler recompiles as you type and shows exactly which CSS each line produces.

It is important to know what runs underneath. The official Stylus package needs Node.js file access, so this page uses a built-in compiler for the commonly used part of the language: variables, nesting, & and root references, simple mixins, arithmetic, interpolation and @media bubbling. Stylus to CSS uses the same compiler for converting whole files without options; this page adds Minify output and focuses on learning what the syntax allows.

Optional punctuation in practice

brand = #0f766e
.btn
  color white
  background brand
  &.is-active, &:focus
    outline 2px solid rgba(brand, 0.5)

.btn {
  color: white;
  background: #0f766e;
}

.btn.is-active,
.btn:focus {
  outline: 2px solid rgba(15,118,110,0.5);
}

No colons, no braces, no $ on the variable. The helper rgba(brand, 0.5) turned the hex variable into an RGBA value. You could equally write color: white; with a colon and semicolon; both forms compile the same. Mixing the two styles line by line inside an indented rule is fine; the rules for braces are covered below.

Syntax experiments worth trying

Conditional assignment

size ?= 12px
size ?= 99px
.a
  font-size size

The output is font-size: 12px. ?= only assigns when the variable has no value yet, which is how Stylus libraries provide overridable defaults.

Mixins that look like properties

border-radius()
  -webkit-border-radius arguments
  border-radius arguments
.a
  border-radius 4px 8px

.a {
  -webkit-border-radius: 4px 8px;
  border-radius: 4px 8px;
}

Because the mixin has the same name as a property, calling it reads like ordinary CSS. arguments holds everything passed in.

Interpolation and root references

name = card
.{name}
  padding 4px
  &-title
    font-weight bold
.nav
  a
    color blue
    /footer
      color gray

This produces .card, .card-title, .nav a and a top-level footer rule: the leading / escapes the nesting. Interpolation works in property names too: with prop = margin, both {prop}-top: 4px and {prop}-top 4px compile to margin-top: 4px.

Surprises to watch for

• Do not mix layouts in one snippet. If any block uses braces, the whole input is read in brace mode, so indented rules elsewhere fail with an error such as Property "color" is outside of any selector.
• Put spaces around a minus sign. base * 2 and base+2 are calculated, but base-2 is read as one name and output literally; write base - 2.
• Mixed units are left alone. 100% - 20px is copied unchanged, which is not valid CSS; write calc(100% - 20px).
• Division needs parentheses. (base / 2) is evaluated; 24px / 16px stays as written.
• Mixin arguments can be written two ways. shadow(0, 8px) and shadow 0 8px both fill two parameters; without parentheses, each space-separated word is one argument.
• An extra indent makes a selector. A property followed by a deeper-indented line becomes part of a selector such as .a color red.

Because several of these slips produce CSS instead of an error, it pays to read the output line by line, or to paste it into the CSS Validator, which flags leftovers such as base-2 or an unevaluated 100% - 20px.

Error messages

What this playground does not cover

Conditionals, loops, functions with return values, hashes, built-in color functions such as lighten(), @extend and plugins need the full Stylus interpreter. They are not reported as errors: an if line, for example, ends up inside a selector. Use the playground for the core syntax and the official stylus command for code that depends on those features. To move styles to Sass, see Stylus to SCSS; to go from existing CSS to Stylus, try CSS to Stylus. Compilation runs in your browser.