SCSS to LESS
Rewrite common SCSS syntax into equivalent LESS syntax entirely in your browser.
Example
SCSS input:
$primary: #333 !default;
@mixin box($p) { padding: $p; color: $primary; }
.card {
@include box(10px);
@extend .base;
content: "#{$primary}";
}LESS output:
@primary: #333;
.box(@p) { padding: @p; color: @primary; }
.card {
.box(10px);
&:extend(.base);
content: "@{primary}";
}How it works
It applies token-level rewrites: $vars become @vars, @mixin/@include become LESS mixin classes, #{...} interpolation becomes @{...}, and @extend becomes &:extend(). It is a syntactic transform, not a full compiler, so review the output.
Good to know
This SCSS to LESS converter rewrites the parts of SCSS that have a clean one-to-one counterpart in LESS, doing the mechanical find-and-replace work you would otherwise do by hand. It targets the token-level differences between the two preprocessors: $variable becomes @variable, @mixin/@include definitions and calls become LESS dot-prefixed mixin classes, #{...} interpolation becomes @{...}, and @extend .foo; becomes &:extend(.foo);. It is aimed at front-end developers migrating a stylesheet, theme, or component library off Sass and onto LESS without manually scrubbing every line.
Reach for it when you inherit an SCSS partial that needs to live in a LESS build, when you are porting snippets between two projects, or when you just want a fast first pass before cleaning up by hand. Paste SCSS on the left, click Convert (or just type, since it converts live), and read the LESS on the right. Because it runs entirely in your browser, you can drop proprietary or unreleased stylesheets in without worrying about them being uploaded.
The key to using the output well is reading the status line under the panes. A green "Converted to LESS" means the rewrite was clean; an amber "Converted with caveats" lists exactly which constructs it could not safely translate. The tool deliberately refuses to guess on things that have no LESS equivalent, so treat any flagged item as a manual to-do rather than assuming the output compiles as-is.
Watch for these limitations, since they are where ported code usually breaks:
- Control flow and logic —
@if/@else, @each/@for/@while loops, @function/@return, and @content — are flagged, not converted, and must be rewritten using LESS guards (when), recursive mixins, or detached rulesets. SCSS maps and placeholder selectors (%name) are also unsupported, and !default/!global modifiers are simply stripped, so re-check any variable that relied on !default override behavior.
Frequently asked questions
Is this a full SCSS compiler?
No. It is a syntactic translator that rewrites SCSS tokens into the closest LESS equivalents ($vars to @vars, @mixin/@include to LESS mixins, #{} to @{}, @extend to &:extend). It does not evaluate logic or compile to CSS.
Why are some SCSS features only flagged, not converted?
Features like @if/@else, @each/@for loops, @function, SCSS maps, and placeholder selectors (%name) have no direct one-to-one LESS syntax. Converting them blindly would produce broken code, so the tool warns you to rewrite them by hand.
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 SCSS and LESS?
Both are CSS preprocessors that add variables, nesting, and mixins, but they differ in syntax and runtime. SCSS uses a dollar sign for variables ($x) and compiles with Dart Sass, while LESS uses an at sign (@x) and was originally built for JavaScript; LESS also handles mixins as reusable class-like rules rather than dedicated @mixin blocks.
Can you convert SCSS to LESS automatically?
You can automate the straightforward syntax swaps — variables, mixins, interpolation, and extends — which is what this tool does. Logic-heavy features like loops, conditionals, functions, and maps have no direct LESS equivalent and still require manual rewriting.
How do you write an if statement in LESS?
LESS has no @if/@else keyword; instead it uses guarded mixins with the when keyword, for example .mixin() when (@mode = dark) { ... }. You define separate guarded versions of a mixin to cover each condition rather than branching inside one block.
How do loops work in LESS compared to SCSS @each or @for?
LESS does not have @each or @for; it achieves iteration through recursive mixins that call themselves with a guard that stops the recursion. A typical pattern defines .loop(@i) when (@i > 0) and ends by calling .loop(@i - 1).
What does @extend become in LESS?
SCSS @extend .base; is written in LESS as &:extend(.base); placed inside the selector that should inherit the styles. LESS also supports an all keyword, &:extend(.base all), to match nested occurrences of the selector.
Does converting SCSS to LESS produce ready-to-use CSS?
No. This produces LESS source code, not compiled CSS, so you still run it through a LESS compiler such as lessc to generate the final stylesheet. It is a syntax translator, not a compiler.
What happens to !default variables when converting to LESS?
The !default modifier is removed because LESS has no exact equivalent. LESS instead resolves variables using lazy loading and last-declaration-wins scoping, so you may need to reorder declarations or import order to reproduce the override behavior !default provided.
Is it safe to paste private or proprietary code into this converter?
The conversion runs entirely client-side in your browser, so the code you paste is processed locally and is not transmitted to a server. It also continues to work offline once the page has loaded.
Related tools