CSS to Stylus

CSS to Stylus Converter

Stylus is famous for its minimal syntax: no braces, no semicolons, and even the colon between property and value is optional. This converter turns CSS into idiomatic Stylus – indentation instead of braces, property value declarations, and nested selectors – so your stylesheet immediately looks like hand-written Stylus.

Before and after

.btn { padding: 8px 16px; background: #d10505; }
.btn:focus { outline: 2px solid #d10505; }

.btn
  padding 8px 16px
  background #d10505

  &:focus
    outline 2px solid #d10505

Conversion rules

• Braces and semicolons are removed; nesting is expressed with indentation (2 spaces, 4 spaces, or tabs).
• Colons are dropped, except where Stylus needs them to tell a value from a selector (for example values with brackets).
• Descendant selectors are grouped by their first part; :hover, ::before, and other pseudo selectors become & blocks.
• At-rules – @media, @supports, @keyframes, @font-face, @import – stay as they are.
• Unquoted url() values containing semicolons or commas, such as data URIs, are quoted automatically because Stylus would otherwise misread them.
• Comments are preserved: block comments become // lines when they span several lines.

Check the result

After every conversion the page compiles your input and the result with the real compilers and compares the CSS, so you can see at a glance whether the translation is exact. Stylus adds vendor-prefixed @keyframes blocks by default, so a stylesheet with animations may compile to slightly more CSS than you started with; the report tells you when the outputs differ.

What next?

Introduce variables (primary = #d10505), extract mixins, and enjoy transparent mixins for prefixes. Test everything with the Stylus Compiler. If you later decide that Sass suits your team better, the same nested structure can be translated with Stylus to SCSS in one step.