Stylus Compiler

Stylus Compiler – Stylus to CSS Online

Stylus is the most flexible CSS preprocessor: braces, colons, and semicolons are all optional, and variables need no prefix. Paste any Stylus code and this page compiles it with the official Stylus compiler, bundled to run in your browser. Choose expanded or minified output and download the CSS.

Stylus syntax highlights

primary = #d10505
rounded(r = 8px)
  border-radius r

.card
  padding 16px
  rounded()
  &:hover
    color primary

• Variables are plain names assigned with =; ?= assigns only if the variable is not yet defined.
• Mixins and functions look like CSS functions: rounded(r = 8px). A function returns the value of its last line.
• Transparent mixins: a mixin can be called like a property – border-radius 4px – which makes vendor-prefix helpers invisible.
• Loops and conditions: for i in 1..3, if, else if, unless.
• Interpolation: .mt-{i} builds selectors from variables.
• Hashes: conf = {gap: 8px} with conf.gap lookups.

You can mix styles too – CSS-like braces in one rule and indentation in the next both compile.

Built-in functions

Color functions (darken, lighten, rgba, mix, spin), math (round, ceil, percentage), list and string helpers, and the built-in mixin library all work, because the compiler's function library is bundled with the page.

What does not work in the browser

Functions that read files – @import of local files, json(), image-size(), embedurl(), and use() for JavaScript plugins – need a file system and are disabled. Merge imported files into the editor before compiling.

Converting Stylus

Leaving Stylus for a more widely used preprocessor? Stylus to SCSS and Stylus to LESS translate variables, mixins, and loops automatically.