CSS to Stylus Converter

What the CSS to Stylus converter does

Stylus accepts plain CSS, but most Stylus code is written in its minimal form: selectors on their own line, properties indented beneath them, and no braces, colons or semicolons. This CSS to Stylus converter produces exactly that style. It parses your stylesheet, nests rules that share a parent selector, converts pseudo-classes to & references, and prints each declaration as property value.

Example

.nav{display:flex}.nav a{color:#333}.nav a:hover{color:#0f766e}@media (max-width:600px){.nav{flex-direction:column}}

.nav
  display flex
  a
    color #333
    &:hover
      color #0f766e

@media (max-width:600px)
  .nav
    flex-direction column

Four CSS rules became two nested blocks. The media query stays at the top level with its rules indented inside it.

Stylus syntax in the output

• Properties are written as name value with a space. Stylus also accepts name: value, so you can add colons back where they improve readability, for example in long grid-template-areas values.
• Nesting is by indentation, 2 spaces per level.
• Comments are kept as /* */ blocks; Stylus also supports // line comments, which are removed at compile time.
• Empty rules get a // empty placeholder line, since an indented block needs at least one line.

Adding Stylus features afterwards

Once converted, you can introduce Stylus variables without any prefix (brand = #0f766e, then color brand), mixins that look like functions (rounded(r = 4px)), and arithmetic with units (padding gap * 2). Because Stylus variables can look like CSS keywords, many teams use a $ prefix ($brand) to keep them recognizable. Check the resulting stylesheet with the Stylus Compiler.

Stylus shortcuts worth adopting

• Parent suffixes: &-title inside .card compiles to .card-title, handy for BEM-style names.
• Property lookup: @width refers to the value of width already set in the same block, so margin-left -(@width / 2) centers an element without repeating the number.
• Root reference: starting a nested selector with / places it at the root instead of under the parent.

These are optional; the converted file works as it is.

Limitations

• Values are copied as written; the converter never creates variables or mixins.
• Compound selectors (.btn.active) and selector lists stay as separate rules.
• Stylus's transparent mixins mean a property name that matches a mixin name you define later would call the mixin. Avoid naming mixins after CSS properties unless that is your intention.

Considering Sass instead? CSS to SCSS produces the same nesting with braces. Conversion runs in your browser.

Checking the converted file

Indentation carries the structure in Stylus, so a few habits keep the converted file working as you edit it:

• Keep indentation consistent. The output uses two spaces. Mixing tabs and spaces while editing is the most common cause of rules ending up under the wrong parent.
• Shorthand with a slash. A value such as font 14px/1.5 Georgia, serif stays literal in a property value; Stylus only divides when you wrap the numbers in parentheses, as in (14px / 2).
• Imports of plain CSS. @import 'reset.css' is passed through as a normal CSS import, while imports without the extension are resolved as Stylus files.

To confirm nothing changed, compile the Stylus with the Stylus Compiler, format both stylesheets the same way and compare them in the diff checker. Apart from grouping and whitespace, the rules should be identical.