CSS to Stylus
Paste CSS and get back Stylus indented syntax with braces and semicolons removed.
Example
CSS in:
.btn {
color: red;
padding: 4px 8px;
}Stylus out:
.btn
color red
padding 4px 8px
How it works
It tokenizes your CSS into selectors and declaration blocks, then re-emits them using indentation instead of braces and dropping trailing semicolons. Comments and at-rule blocks (like @media) are preserved as nested indented blocks.
Good to know
CSS to Stylus converts standard CSS into Stylus's indented (Pythonic) syntax entirely in your browser. It parses your selectors and declaration blocks, then re-emits them without curly braces, without trailing semicolons, and without the colon between property and value — using two-space indentation to express nesting instead. It's aimed at front-end developers and designers who are adopting Stylus on a project, migrating an existing stylesheet, or grabbing a CSS snippet from somewhere and want it in their preferred preprocessor format.
Reach for it when you have working CSS (a component's styles, a vendor snippet, a third-party widget's rules) and want a quick structural starting point in Stylus rather than reformatting every line by hand. Because everything runs client-side, you can paste proprietary or unreleased styles without them ever leaving your machine, and the conversion updates live as you type.
Read the output as a faithful structural translation, not a rewrite: each property: value; becomes property value, comma-separated selectors are split onto separate lines, and at-rule blocks like @media become indented child blocks. What it deliberately does not do is convert CSS custom properties into Stylus $ variables, collapse repeated values into mixins, or apply Stylus shorthands — those still appear as plain declarations that are valid Stylus but not idiomatic.
A practical caveat: this is a best-effort tokenizer, so unusual input can trip it up. Keep these in mind:
- Check the output after pasting complex CSS — unclosed braces, comments inside selectors, or odd at-rule formatting may shift indentation.
- Treat the result as a draft and run it through your real Stylus build to confirm it compiles, then refine variables and mixins by hand for cleaner, DRY-er code.
Frequently asked questions
Does this fully support all Stylus features like variables and mixins?
No. It does a structural conversion (removing braces and semicolons, indenting nesting). It does not rewrite CSS custom properties into Stylus variables or generate mixins; those still work as plain declarations in Stylus.
How are @media and other at-rule blocks handled?
At-rules with a block, like @media, become a nested indented block in Stylus with their inner rules indented beneath them. At-rules without a block, like @import, are kept on a single line.
Is my data uploaded anywhere?
No — this tool runs entirely in your browser. Your input never leaves your device and it works offline once loaded.
Is it free?
Yes, completely free with no sign-up and no limits.
People also ask
What is the difference between CSS and Stylus syntax?
CSS uses curly braces to group declarations, colons between property and value, and semicolons to end each line. Stylus makes nearly all of that optional, using indentation to define blocks and whitespace to separate property from value, which is what this tool generates.
Does Stylus still accept normal CSS?
Yes. Stylus is a superset that accepts standard CSS with braces and semicolons as-is, so converting to indented syntax is a stylistic choice rather than a requirement. This tool simply produces the cleaner indented form many Stylus users prefer.
How do I convert Stylus back to plain CSS?
You compile it with the Stylus tool (for example the stylus CLI or a build plugin), which outputs standard CSS. This converter only goes one direction, from CSS into Stylus indented syntax.
Will this turn my CSS variables into Stylus variables?
No. CSS custom properties such as --color stay as ordinary declarations in the output. The tool performs a structural conversion only and does not create Stylus variables, mixins, or functions.
Does the converter keep my CSS comments?
Yes. Comments written in CSS block syntax are detected and carried over into the Stylus output at the matching indentation level.
How does it handle comma-separated selectors like a:hover, a:focus?
Each selector in a comma-separated group is placed on its own line above the shared declarations, which is the standard Stylus way of expressing grouped selectors.
Can I convert SCSS or Sass to Stylus with this tool?
This particular tool is built for plain CSS input. Preprocessor-specific features like SCSS nesting, $variables, or @mixin are not interpreted; for those, separate converters such as SCSS to Stylus are listed under the related tools.
Is it safe to paste private or unreleased CSS here?
The conversion happens entirely in your browser and nothing is uploaded to a server, so your input stays on your device. It also continues to work offline once the page has loaded.
Related tools