Stylus to LESS Converter

Paste Stylus source and get LESS — braces and semicolons are added, variables become `@variables`, and mixins are rewritten in LESS syntax.

Last updated: May 25, 2026

Stylus Input

LESS Output

@primary: #0f766e;
@spacing: 1rem;

.flex-center() {
  display: flex;
  align-items: center;
  justify-content: center;

}
.card {
  background: white;
  padding: @spacing;

  &:hover {
    background: @primary;

  }
  .title {
    color: @primary;
    font-size: 1.25rem;

  }
}
.hero {
  .flex-center();
  min-height: 100vh;
}

Converts Stylus to LESS. Adds braces and semicolons, rewrites name = value as @name: value;, and converts Stylus mixin syntax to LESS .mixin() style.

Client-Side Processing

Input Data Stays on Device

Instant Local Execution

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is Stylus to LESS Converter?

Stylus and LESS are both CSS preprocessors but their authoring conventions differ. Stylus uses indentation, optional colons and semicolons, and bare identifiers for variable references. LESS keeps the familiar CSS brace and semicolon syntax, prefixes variables with `@`, and treats parametric class selectors (e.g. `.mixin()`) as mixins.

This converter normalises Stylus into SCSS-style source (adding braces and semicolons, rewriting variable assignments, and prefixing bare identifier references) and then runs the SCSS-to-LESS pass, which swaps `$variables` for `@variables`, rewrites `@mixin`/`@include` into LESS `.mixin()` definitions and calls, and approximates `@extend` with LESS `&:extend()`.

It is well suited for migrating a Stylus codebase to LESS, integrating Stylus snippets into a LESS project, or producing a LESS baseline you can extend with LESS-specific helpers. Stylus features such as transparent mixins, control flow, and built-in helpers are not translated.

How to Use Stylus to LESS Converter

Paste Stylus code into the input panel.

The LESS output appears instantly on the right.

Verify variables, mixins, and nested rules.

Copy the LESS or download it as a .less file.

Replace any unsupported Stylus features manually.

Common Use Cases

Migrate a Stylus partial into a LESS-based project.
Integrate a Stylus component into a LESS design system.
Compare equivalent variable and mixin syntax between Stylus and LESS.
Convert documentation snippets from Stylus to LESS for an article.
Generate a LESS baseline from a Stylus prototype before adding LESS helpers.

Example Input and Output

Convert Stylus assignments and a mixin into LESS equivalents.

Stylus input

primary = #0f766e
flex-center()
  display flex

.hero
  flex-center()
  color primary

LESS output

@primary: #0f766e;
.flex-center() {
  display: flex;
}
.hero {
  .flex-center();
  color: @primary;
}

Privacy

All conversion happens locally in your browser. No Stylus or LESS is transmitted to any server.

Stylus-only features

Transparent mixins, control flow, and Stylus built-in functions are not translated. Review and rework these manually after conversion.

Frequently Asked Questions

Can LESS read Stylus files directly?

No. LESS and Stylus use different syntax for variables, statements, and mixins. This tool rewrites the syntactic differences so the result is valid LESS.

What about Stylus colour helpers?

LESS has its own colour functions (lighten, darken, mix, fade). Most simple calls remain valid because the names overlap, but check argument order and naming.

How are bare identifiers handled?

Identifiers that match an earlier `name = value` assignment are rewritten as `@variables` in the output. Keyword values are left alone.

Does my Stylus get uploaded?

No. Conversion runs entirely in your browser — nothing is sent to a server.