Stylus to CSS Compiler

Paste your Stylus below and get compiled CSS back instantly. Variables, mixins, functions, loops, conditionals and Stylus's minimal, indentation-based syntax are all supported, because the code is compiled by the official Stylus compiler. Everything runs in your browser, so your code never leaves your computer.

Need to go the other way? Use our CSS to Stylus Converter.

About Stylus to CSS Compiler

Stylus is a CSS preprocessor known for its flexible, minimal syntax: braces, colons and semicolons are all optional, and nesting is expressed through indentation. On top of that it adds variables, mixins, functions, operators, loops and conditionals. Browsers only understand plain CSS, so Stylus has to be compiled before it's used on a website. This tool does that instantly, using the Stylus compiler itself.

Here's a small example of Stylus and the CSS it compiles to:

primary = #17a2b8
radius = 5px

rounded(r = radius)
  border-radius r

.btn
  color #fff
  background primary
  rounded()

  &:hover
    background #128294

.btn {
  color: #fff;
  background: #17a2b8;
  border-radius: 5px;
}
.btn:hover {
  background: #128294;
}

Features

• Full Stylus support – variables, nesting, mixins with default arguments, transparent mixins, functions, operators, for loops, if/unless conditionals, interpolation and built-in functions like darken(), lighten() and mix().
• Live compile with clear errors – the CSS updates as you type. Errors show the line they occur on, and the last successful result stays visible (dimmed) while you fix them.
• Expanded or minified – choose readable CSS with your preferred indentation, or minified CSS ready for production.
• Line comments – optionally add a comment above each rule pointing back to the Stylus line it came from, which helps when debugging larger stylesheets.

Because the compiler runs in your browser, @import and @require can't load files from your computer – paste the contents of those files in instead.