LESS to Stylus

Convert LESS stylesheets to Stylus syntax.

LESS to Stylus Converter

LESS and Stylus were both born in the Node.js ecosystem and share many ideas – mixins that look like function calls, lazy-feeling variables, and a JavaScript compiler. This converter rewrites LESS code as clean, indentation-based Stylus.

Mapping

LESS Stylus
@size: 10px; $size = 10px
.mixin(@a; @b: 2px) { … } mixin($a, $b = 2px)
.mixin(1px); mixin(1px)
&:extend(.x); @extend .x
.icon-@{name} .icon-{'' + $name}
~"calc(100% - @{w})" unquote("calc(100% - " + $w + ")")
@config: { a: 1px; } / @config[a] $config = {a: 1px} / $config.a

The converter keeps the $ prefix on variables. Stylus allows $ in identifiers, and the prefix makes variables impossible to confuse with CSS keywords or mixin names.

Stylus details handled for you

  • Stylus has no interpolation inside strings, so "…@{w}…" is rewritten as string concatenation.
  • Interpolated selectors use {'' + $var} because Stylus would otherwise drop units such as px from the selector.
  • Values with brackets keep a colon so they are not mistaken for attribute selectors.
  • @import (css) url(…) becomes a plain @import.

What to review

LESS guards (when) are removed and reported; rewrite them as if blocks inside the Stylus mixin. Plain classes used as mixins become @extend. 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.

Test your stylesheet with the Stylus Compiler or translate it onward with Stylus to SCSS. The swap button turns the converter around, which is handy for comparing how the same component reads in both languages.

Frequently Asked Questions

Stylus variables can be bare names, but $ is allowed and keeps variables clearly separate from properties, keywords, and mixin names, which avoids subtle bugs.

Not as syntax. Guards are dropped with a note; use if/else inside the Stylus mixin to express the same condition.

Yes. Detached-ruleset maps become Stylus hashes and lookups like @config[a] become $config.a.