About the Stylus Compiler
Use this when you want to check what a snippet of Stylus actually produces without installing a build chain. Variables are substituted, mixins are expanded at every call site, nested rules are flattened into full selectors and the parent reference is resolved, so what comes out is the stylesheet a browser would receive.
The compiled output has two shapes. Expanded puts one declaration per line with a blank line between rules, which is what you want when you are reading the result or pasting it into a bug report. Compressed strips every space and newline it can, which is the form to copy when you are dropping a small block into production and do not want another build step. Neither mode reorders declarations, so cascade order is exactly as you wrote it.
Compilation happens on this page using the Dart Sass engine after the Stylus tree has been translated, because there is no browser build of Stylus itself that we can ship. In practice that covers variables, defaults, mixins with parameters, nesting, media queries and interpolation. What it does not cover is the Stylus standard library, transparent mixins and property lookup with @property, all of which will report an error rather than compile to something wrong. If a rule fails, the message names the construct so you can rewrite that one line. For a source level translation instead of a compile, see the Stylus to SCSS Converter.
How to use
- Paste your Stylus into the left pane. Indentation defines the blocks, so keep it consistent.
- Choose Expanded while you are reading the result, or Compressed when you are ready to ship it.
- Press Compile and check the line count in the status area.
- Copy the CSS, or download it as a .css file.
Common questions
- Which Stylus features are supported here?
- Variables and defaults, parameterised mixins, nesting with the parent reference, interpolation, media queries and imports of names you paste inline all compile.
- Why did my built in function call fail?
- The Stylus standard library is not bundled, so calls such as lookup or a plugin helper are reported as errors instead of being guessed at.
- Can I compile several files with imports?
- Not from this page. There is no filesystem in the browser, so paste the contents of each partial in the order your imports would have loaded them.
- Is the compressed output safe to ship?
- Yes. It only removes whitespace and shortens values in ways that do not change rendering, and declaration order is preserved.