LESS to STYLUS
Paste LESS and get a best-effort Stylus translation of variables, interpolation and common syntax, entirely in your browser.
Example
LESS input:
@primary: #4caf50;
.button {
color: @primary;
&:hover { color: darken(@primary, 10%); }
}Stylus output:
primary = #4caf50
.button {
color: primary;
&:hover { color: darken(primary, 10%); }
}How it works
It applies line-by-line syntactic rewrites (LESS @variables to Stylus assignments, @{x} interpolation to {x}, // and /* */ comments, @import) without running a real compiler. Always review the result, as complex mixins and guards need manual fixes.
Good to know
LESS to STYLUS is a browser-based code converter that rewrites LESS stylesheet syntax into Stylus syntax. It is aimed at front-end developers who are migrating a project off LESS, evaluating Stylus, or just want a quick head start instead of hand-editing every variable and interpolation. Everything happens locally in your browser, so you can paste proprietary or unreleased styles without sending them to a server.
Reach for it when you are porting a component library, theme, or partial from LESS to Stylus and the bulk of the work is mechanical: turning @variable declarations into Stylus assignments, converting @{name} interpolation to {name}, and leaving @import, comments, and at-rules like @media and @keyframes intact. It is a syntactic transform, not a compiler, so it never evaluates math, resolves mixins, or produces compiled CSS.
Read the output as a draft, not a finished file. The right-hand pane is a line-by-line rewrite that preserves your indentation and structure; treat it as roughly 80 percent done and diff it against the original. Pay special attention to anything the converter intentionally leaves alone or cannot map cleanly:
- Mixin guards (
when conditions), parametric mixins, and detached rulesets, which have no direct one-to-one Stylus form - LESS built-in functions and operations like
(@base / 2) that may behave differently or need Stylus equivalents
A practical tip: convert in small chunks rather than dumping an entire codebase at once, so it is easier to spot where a guard or mixin needined manual fixing. After converting, run the result through the actual Stylus compiler in your build to catch anything the syntactic pass could not resolve.
Frequently asked questions
Does this run the real LESS or Stylus compiler?
No. There is no reliable browser-based LESS-to-Stylus converter, so this performs a best-effort syntactic transform (variables, @{} interpolation, imports and comments). It does not compile or evaluate the code.
What does it not handle automatically?
LESS mixin guards (when conditions), detached rulesets, parametric mixin semantics, and some LESS built-in functions have no direct Stylus equivalent and will need manual edits after conversion.
Is my data uploaded anywhere?
No — this tool runs entirely in your browser. Your input never leaves your device and it works offline once loaded.
Is it free?
Yes, completely free with no sign-up and no limits.
People also ask
What is the difference between LESS and Stylus?
LESS uses CSS-like syntax with @-prefixed variables and semicolons, while Stylus offers an optional, minimal syntax that can omit braces, semicolons, and colons and uses = for variable assignment. Both are preprocessors that compile to CSS, but Stylus is generally more flexible and terse.
How do you write variables in Stylus compared to LESS?
In LESS you write a variable as @color: #4caf50; and reference it with @color. In Stylus the same variable is color = #4caf50 and you reference it simply as color, without the @ prefix or trailing semicolon.
Does Stylus still need braces and semicolons?
No, they are optional. Stylus supports an indentation-based syntax where braces, semicolons, and colons can be dropped, but it also accepts standard CSS-style braces, so converted code with braces remains valid.
Can I convert LESS mixins automatically to Stylus?
Not reliably with a syntactic converter. Simple variable and interpolation changes translate cleanly, but LESS parametric mixins, mixin guards, and detached rulesets use semantics that differ from Stylus and usually require manual rewriting.
How does interpolation work in Stylus?
Stylus uses curly braces for interpolation, such as .icon-{name}, whereas LESS wraps the name in @{name}. This converter rewrites the @{...} form to the {...} form during conversion.
Is Stylus still maintained and worth migrating to?
Stylus is an established CSS preprocessor that remains usable, though its development activity is lower than that of Sass/SCSS, which is the most widely adopted preprocessor today. Whether to migrate depends on your team's tooling and ecosystem needs.
Will this tool produce compiled CSS from my LESS?
No. It only translates LESS source syntax into Stylus source syntax; it does not run a compiler or evaluate the code. You still compile the resulting Stylus with your normal build pipeline to get CSS.
How do @import statements convert from LESS to Stylus?
Stylus supports @import like LESS, so the converter keeps import statements largely intact and just trims trailing semicolons. You may still need to adjust file extensions or paths to match how your Stylus build resolves imports.
Related tools