Stylus to LESS

Stylus to LESS Converter

Stylus allows code without braces, colons, semicolons, or even variable prefixes. That freedom makes it pleasant to write but hard to convert with simple search-and-replace. This converter parses Stylus properly – it knows which bare names are variables, which lines are mixin calls, and which lines are selectors – and writes equivalent LESS.

What it understands

• Bare variables: primary = #d10505 is recognized, and every later use of primary becomes @primary.
• Default assignment: pad ?= 8px becomes @pad: 8px; (LESS variables are lazy, so the last definition wins).
• Mixins and functions: rounded(r = 8px) becomes .rounded(@r: 8px).
• Transparent mixins: a mixin called like a property (border-radius 4px) becomes a mixin call – while the same name used inside that mixin stays a real property.
• Selector lines: Stylus lets you write one selector per line (textarea / input); they are merged into textarea, input.
• Loops and conditions: for i in 1..3 becomes a recursive LESS mixin, if/else and unless become CSS guards.
• Hashes: conf = {a: 1px} with conf.a becomes a LESS map with @conf[a].
• Interpolation: .mt-{i} becomes .mt-@{i}.
• Mixed syntax: blocks written with braces and semicolons are understood too.

What to check

Stylus property lookup (@width), partial references (^[0]), and root references (/) have no LESS equivalent and are reported. Functions that return values cannot be expressed in LESS and are commented out.

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 and LESS calculate darken() and lighten() differently, so colors created with those functions may differ by a few shades.

Compile the result with the LESS Compiler, or translate to Sass with Stylus to SCSS.