LESS to SASS
Rewrite LESS source into the indented SASS syntax with a fast, offline, best-effort converter.
Example
LESS input:
@primary: #4488cc;
.rounded(@radius: 4px) {
border-radius: @radius;
}
.card {
color: @primary;
.rounded(8px);
}SASS output:
$primary: #4488cc
@mixin rounded($radius: 4px)
border-radius: $radius
.card
color: $primary
@include rounded(8px)
How it works
It tokenizes your LESS, rewrites variables (@x to $x), mixin calls/definitions and imports, then re-emits the rules as indentation-based SASS with braces and semicolons removed. It runs entirely client-side and never sends code anywhere.
Good to know
LESS to SASS is a browser-based converter that rewrites LESS source code into the indented .sass syntax, the brace-free, semicolon-free dialect of Sass that relies on indentation to express nesting. It is aimed at front-end developers and design-system maintainers who are migrating a codebase off LESS and have decided to adopt the terser indented style rather than the SCSS style. Everything happens client-side, so even large stylesheets stay on your machine.
Reach for it when you are porting legacy LESS partials, a vendor theme, or a quick snippet and want a fast first pass instead of retyping rules by hand. The converter handles the mechanical changes: @variable becomes $variable, mixin definitions like .rounded(@r) become @mixin rounded($r), calls become @include, interpolation @{x} becomes #{$x}, and LESS escaping ~"..." becomes unquote("..."). Note it deliberately targets .sass, not .scss — if you want to keep braces and semicolons, use the sibling LESS to SCSS tool instead.
Read the output as a draft, not a finished file. The result panel keeps your original indentation hierarchy and strips the punctuation, so scan it the way the Sass compiler would: indentation alone now defines which declarations belong to which selector. Watch especially for these spots:
- Mixins that used LESS guards (
when (...)), which have no direct line-for-line Sass equivalent and will need an @if rewrite. - LESS built-in functions such as
darken() or lighten() that map to Sass module functions and may require a @use "sass:color" import. - Math and operations, since LESS and Sass differ on when and how arithmetic is evaluated.
The practical caveat: this is a syntactic transform, not a semantic compiler. LESS evaluates variables lazily while Sass evaluates eagerly, so a stylesheet that relied on a variable being redefined later can behave differently after conversion. Always run the converted file through the Sass compiler and diff the compiled CSS against your original LESS build before shipping it.
Frequently asked questions
Does this output .sass or .scss?
It outputs the indented .sass syntax (no braces or semicolons, indentation-based nesting). For .scss you would keep braces and semicolons, which this tool does not target.
Why does the tool warn me to review the result?
LESS and SASS differ semantically: LESS evaluates variables lazily and has its own escaping (~"..."), guards, and operation rules. This is a syntactic transform, so mixins with guards, complex operations, or edge-case escaping may need manual fixes.
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 .sass and .scss syntax?
.sass is the original indented syntax: it omits curly braces and semicolons and uses indentation to define nesting. .scss is the newer, CSS-like syntax that keeps braces and semicolons. Both compile to the same CSS and support the same features; the choice is purely about how the source looks.
Can I convert LESS to SASS automatically?
You can automate the structural rewrite — variable prefixes, mixin and include keywords, interpolation, and removing braces and semicolons. Semantic differences like LESS guards, lazy evaluation, and certain built-in functions usually still need manual review, so a fully automatic, drop-in conversion is rarely guaranteed.
Is LESS still maintained or should I switch to Sass?
Both LESS and Sass are still functional, but Sass has a larger active ecosystem and more frequent updates, including its modern module system with @use and @forward. Many teams migrate to Sass for tooling and community support, though this is a project decision rather than a technical necessity.
How do LESS mixins map to Sass mixins?
In LESS a mixin is just a class selector you call, like .rounded(8px). In Sass you declare it explicitly with @mixin rounded($r) and invoke it with @include rounded(8px). The converter performs this rename, but parameter defaults and guard conditions may need adjustment.
Why does my converted Sass file fail to compile?
Common causes are inconsistent indentation (the indented syntax is strict about it), LESS color or math functions that need a Sass module import such as @use "sass:color", or guard-based mixins that have no direct equivalent. Compiling and reading the first error message usually points to the exact line.
Does converting LESS to Sass change my compiled CSS output?
It should not if the conversion is correct, but because LESS and Sass evaluate variables and operations differently, edge cases can produce different results. Diffing the compiled CSS from both sources is the reliable way to confirm the output matches.
What does the unquote() function do in the converted output?
Sass uses unquote() to strip the surrounding quotation marks from a string so the contents are treated as raw CSS. The converter emits it in place of LESS's ~"..." escape, which served the same purpose of passing literal text through without Sass interpreting it.
Related tools