Why convert Stylus to LESS?

Usually because you're migrating away from Stylus (it's effectively abandoned) and LESS is already established in your project.

What syntax differences matter?

LESS requires braces and semicolons; Stylus doesn't. Variables use @ in LESS, $ in Stylus. The tool handles both.

Basic mixins yes. Stylus's transparent mixins (used like functions) need manual review — LESS mixins have slightly different invocation.

Mostly lossless. Edge cases: Stylus's @block values and deeply chained arithmetic may need manual cleanup after conversion.

A worked example, rendered from real sample data. Sign in to run the tool on your own input.

Input

.card
  display flex
  padding 1rem
  background white

Output

.card {
  display: flex;
  padding: 1rem;
  background: white;
}

Convert Stylus to LESS syntax. Part of the DevTools Surf developer suite. Browse more tools in the CSS collection.

LESS and Stylus both run on Node.js, making this conversion between two JavaScript-based preprocessors.
LESS uses @ for variables while Stylus has no required prefix, requiring a syntax transformation during conversion.
Both LESS and Stylus support lazy evaluation of variables, unlike SCSS which uses imperative variable scoping.

Why convert Stylus to LESS?: Usually because you're migrating away from Stylus (it's effectively abandoned) and LESS is already established in your project.
What syntax differences matter?: LESS requires braces and semicolons; Stylus doesn't. Variables use @ in LESS, $ in Stylus. The tool handles both.
Will mixins translate cleanly?: Basic mixins yes. Stylus's transparent mixins (used like functions) need manual review — LESS mixins have slightly different invocation.
Is this lossy?: Mostly lossless. Edge cases: Stylus's @block values and deeply chained arithmetic may need manual cleanup after conversion.

A worked example, rendered from real sample data. Sign in to run the tool on your own input.

Input

.card
  display flex
  padding 1rem
  background white

Output

.card {
  display: flex;
  padding: 1rem;
  background: white;
}

Convert Stylus to LESS syntax. Part of the DevTools Surf developer suite. Browse more tools in the CSS collection.

LESS and Stylus both run on Node.js, making this conversion between two JavaScript-based preprocessors.
LESS uses @ for variables while Stylus has no required prefix, requiring a syntax transformation during conversion.
Both LESS and Stylus support lazy evaluation of variables, unlike SCSS which uses imperative variable scoping.

Why convert Stylus to LESS?: Usually because you're migrating away from Stylus (it's effectively abandoned) and LESS is already established in your project.
What syntax differences matter?: LESS requires braces and semicolons; Stylus doesn't. Variables use @ in LESS, $ in Stylus. The tool handles both.
Will mixins translate cleanly?: Basic mixins yes. Stylus's transparent mixins (used like functions) need manual review — LESS mixins have slightly different invocation.
Is this lossy?: Mostly lossless. Edge cases: Stylus's @block values and deeply chained arithmetic may need manual cleanup after conversion.