LESS to Stylus Converter
Convert LESS stylesheets to Stylus instantly. Transforms @variables to $variables, removes braces and semicolons, and reformats nesting into clean Stylus indented syntax.
LESS Input
Stylus Output
What Is LESS to Stylus Conversion?
LESS and Stylus are both CSS preprocessors that add variables, nesting, and mixins on top of plain CSS — but they have very different syntax. LESS uses @variable: value; with the familiar braces-and-semicolons structure you already know from CSS. Stylus goes a different route: it's whitespace-significant, meaning indentation defines structure instead of {} and ;. Variables start with $ instead of @. The result is extremely compact, expressive code.
This tool handles the mechanical parts of that migration: it renames @vars to $vars, strips braces and semicolons, and reformats nested rules using indentation. It's a great starting point when you're moving a project from LESS to Stylus — or just exploring what the same styles look like in a different preprocessor. Complex mixins and LESS-specific built-in functions may still need a manual pass, but the structural conversion is handled for you.
How to Use
Paste your LESS code
Drop your .less file content into the left editor, or click Upload to load a file directly. You can also click Sample to load a working example.
Conversion happens automatically
As soon as you type or paste, the converter runs. Variables are renamed from @name to $name, curly braces are removed, semicolons are dropped, and nesting is expressed through indentation — just like real Stylus syntax.
Copy or download the result
Hit Copy to grab the Stylus code to your clipboard, or Download to save it as a .styl file. From there you can drop it straight into a project that uses a Stylus build pipeline.
Example
Here's a real LESS snippet converted to Stylus. Paste your own code above and the conversion happens instantly.
LESS alert component → Stylus
LESS input
Stylus output
Click Sample above to load this example directly into the editor and try it yourself.
When This Tool Helps Most
If you've inherited a LESS codebase and your new project uses Stylus, manually rewriting every rule is tedious and error-prone. This converter takes care of the syntax differences in one shot — variable prefix changes, brace removal, semicolon stripping. You're left with structurally correct Stylus that you can then fine-tune.
It's also useful if you're just learning Stylus and want to see how familiar LESS patterns translate. Side-by-side comparison makes it easy to understand the differences between CSS preprocessors without having to read the full docs for each one.
Frequently Asked Questions
What is the main syntax difference between LESS and Stylus?
LESS looks a lot like regular CSS — it uses @variable: value;, curly braces for nesting, and semicolons at the end of each declaration. Stylus is whitespace-significant: indentation defines structure, braces and semicolons are optional (and usually omitted), and variables use a $ prefix. The same styles can be written in either, but Stylus tends to be more concise.
Why does this converter change @variables to $variables?
In LESS, variables are prefixed with @. In Stylus, variables use $ (though technically Stylus allows bare names too). The $ convention is more common and avoids confusion with CSS at-rules like @media and @keyframes, which need to stay untouched. This converter renames @yourVar to $yourVar while leaving real at-rules alone.
Will mixins and functions convert correctly?
Simple property-based mixins — where a mixin is just a block of rules included inside another selector — will convert structurally. However, LESS-specific built-in functions (like lighten(), darken(), mix()) also exist in Stylus with the same names, so they typically carry over fine. Parametric mixins with guards or complex LESS logic may need manual adjustment.
Does nesting work the same in both preprocessors?
Yes — both LESS and Stylus support nested selectors and the & parent reference. The difference is purely syntactic: LESS uses braces to delimit blocks, while Stylus uses indentation. This converter reformats the nesting structure automatically.
Can I use this tool to migrate a full LESS project to Stylus?
It's a solid starting point. The converter handles the structural syntax — variable renaming, brace and semicolon removal, indentation-based nesting. For a large project, run each file through the converter, then do a quick review pass for anything that used LESS-specific features (like .mixin() call syntax or #namespace > .mixin lookups) that don't have a direct Stylus equivalent. The Stylus docs are a handy reference during that review.
Are @media queries preserved during conversion?
Yes. The converter explicitly skips renaming CSS at-rules like @media, @keyframes, @import, and @font-face. Only LESS user-defined variables (things like @primaryColor) are renamed to use the $ prefix.
Related Tools
Explore more CSS preprocessing tools: convert between LESS, SCSS, Sass, Stylus, and plain CSS — or format and minify your stylesheets.