LESS to SCSS
Translate LESS stylesheets into Sass SCSS syntax with a fast, offline, best-effort converter.
Example
LESS input:
@primary: #4287f5;
.rounded(@r: 4px) { border-radius: @r; }
.card { color: @primary; .rounded(8px); }SCSS output:
$primary: #4287f5;
@mixin rounded($r: 4px) { border-radius: $r; }
.card { color: $primary; @include rounded(8px); }How it works
Paste LESS code and it rewrites variables (@name to $name), mixin definitions/calls, &:extend, ~"..." escaping, guards and imports into SCSS. It is a syntactic transform, not a full compiler, so review the output before use.
Good to know
LESS to SCSS is a browser-based converter that rewrites LESS stylesheet syntax into the Sass SCSS dialect. It is aimed at front-end developers who are migrating a project off LESS, porting a third-party theme, or maintaining two pipelines and want a quick head start instead of retyping every variable and mixin by hand. Because everything runs locally, you can paste proprietary or unpublished stylesheets without anything leaving your machine.
Reach for it when you are doing a one-off or incremental migration: dropping a LESS partial into a Sass build, translating a vendor's @variable declarations into $variable, or converting .mixin() definitions and calls into @mixin / @include pairs. It also handles the syntax-only conversions that are tedious to do manually, such as &:extend(.foo) into @extend .foo, interpolation like @{name} into #{$name}, and ~"..." escaping into unquote(...).
Read the output as a draft, not a finished file. The converter is a syntactic transform, so it changes the shape of the code but never evaluates anything. Two things in particular need your eyes:
- LESS guards like
.foo when (...) are left in place with a /* convert to @if manually */ comment, because there is no mechanical 1:1 rewrite into Sass conditionals. - Standard CSS at-rules (
@media, @keyframes, @font-face, @supports) are intentionally preserved, since they are valid in SCSS too; only true LESS variables get the $ treatment.
A practical caveat: LESS and Sass differ in how they evaluate math, color functions, and division, so an expression that looks correct after conversion may still behave differently at compile time. After pasting the result into your build, run the Sass compiler and visually diff the rendered CSS against the original LESS output before trusting it in production.
Frequently asked questions
Does this fully compile LESS like a real preprocessor?
No. It is a syntactic transform that rewrites LESS syntax (variables, mixins, &:extend, imports, escaping) into SCSS. It does not evaluate values, and LESS guards (when (...)) are flagged with a comment for you to rewrite as @if manually.
Why are some @-rules left unchanged?
Standard CSS at-rules like @media, @import, @keyframes, @font-face and @supports are valid in SCSS too, so they are preserved. Only LESS variables such as @color are converted to $color.
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 SCSS?
Both are CSS preprocessors that add variables, nesting, mixins, and functions. LESS uses an @ prefix for variables and dot-call mixin syntax, while SCSS (a syntax of Sass) uses a $ prefix and explicit @mixin/@include directives. They also differ in how they handle math, conditionals, and color functions.
How do I convert a LESS variable to SCSS?
Change the @ prefix to a $ prefix, so @primary: #4287f5; becomes $primary: #4287f5;. CSS at-rules like @media and @keyframes keep their @ and should not be changed.
How do LESS mixins map to SCSS mixins?
A LESS mixin defined as .rounded(@r) {...} becomes @mixin rounded($r) {...} in SCSS, and a call like .rounded(8px); becomes @include rounded(8px);. The conversion is mechanical, but parametric defaults and pattern-matching mixins may need manual review.
Can a tool fully compile LESS into SCSS automatically?
No automated tool can guarantee a perfect, drop-in conversion. Syntax can be rewritten reliably, but LESS guards, runtime math, recursion, and color-function differences often require manual adjustment and recompilation to verify.
What happens to LESS guards like 'when' during conversion?
There is no direct SCSS equivalent for LESS guards, so this converter leaves them in place and inserts a comment telling you to rewrite them as @if conditionals manually within the mixin or selector.
Is LESS still maintained or should I migrate to Sass?
LESS is still functional and used in legacy and some component libraries, but Sass/SCSS has broader adoption and tooling momentum today. Whether to migrate depends on your project's dependencies and build pipeline rather than any single technical rule.
Does this converter change my CSS @media or @keyframes rules?
No. Standard CSS at-rules such as @media, @import, @keyframes, @font-face, and @supports are valid in SCSS too, so they are preserved unchanged; only LESS variables are converted to the $ form.
Will converted SCSS produce the same compiled CSS as the original LESS?
Not always. Because the conversion is syntactic and does not evaluate values, differences in math, division, and color functions between the two languages can change the final output, so you should compile and compare the results.
Related tools