Stylus to LESS Converter

What the Stylus to LESS converter does

This Stylus to LESS converter first compiles your Stylus with the site's built-in Stylus compiler, which evaluates variables, simple mixins and arithmetic, and then prints the resulting CSS as nested LESS. Because LESS is a superset of CSS with braces and semicolons, the output drops straight into a LESS project and compiles to the same styles. It is also a quick way to hand Stylus-based component styles to a team that maintains a LESS theme, such as a Bootstrap 3 or Ant Design 4 customization.

Example

brand = #0f766e
border-radius(r = 4px)
  -webkit-border-radius r
  border-radius r
.card
  border-radius(6px)
  color brand
  &:hover
    background rgba(brand, 0.1)

.card {
  -webkit-border-radius: 6px;
  border-radius: 6px;
  color: #0f766e;
  &:hover {
    background: rgba(15,118,110,0.1);
  }
}

The Stylus mixin that shares its name with the border-radius property expanded into the prefixed and unprefixed declarations. rgba(brand, 0.1) was converted to a standard rgba() value, because LESS would not know the Stylus variable brand.

Stylus to LESS mapping

Use the table to rebuild shared variables and mixins in LESS; the converter's output provides the evaluated rules.

Worked example: restoring variables and mixins

Taking the converted .card rule from the example above, a few lines turn the evaluated output back into maintainable LESS:

@brand: #0f766e;

.border-radius(@r: 4px) {
  border-radius: @r;
}

.card {
  .border-radius(6px);
  color: @brand;
  &:hover {
    background: fade(@brand, 10%);
  }
}

LESS's fade() sets the alpha channel, so fade(@brand, 10%) compiles to the same rgba(15, 118, 110, 0.1) as the Stylus original. The -webkit-border-radius line has been dropped on purpose: current browsers do not need the prefix, and an Autoprefixer step can add any prefixes your browser targets still require.

Limitations

• Stylus conditionals, loops, functions with return values, built-in color functions and @extend are not supported by the Stylus compiler used here, so remove or rewrite them before converting.
• Variables and mixins are replaced by values in the output.
• Rules inside @media are output inside a top-level media block.

Preparing Stylus before converting

A little preparation gives cleaner results:

• Inline any @required or @imported files whose variables and mixins you use, since other files cannot be read.
• Replace plugin mixins (for example from nib) with your own small mixin definitions.
• Replace built-in color functions like lighten() with literal colors, or recreate them afterwards with LESS's own lighten(), which takes the same arguments.
• Keep one indentation width throughout the file; mixing two and four spaces between sibling lines confuses indentation-based parsing.
• Rewrite if blocks and for loops as plain rules; LESS guards and each() can express the logic afterwards.

Verify the LESS with the LESS Compiler, or get CSS directly from Stylus to CSS. Conversion happens in your browser.