SASS to LESS
Paste SCSS and get LESS-style syntax with variables, mixins and interpolation rewritten for you.
Example
SCSS input:
$primary: #4f46e5;
@mixin card($p: 1rem) { padding: $p; }
.btn { @include card(1.5rem); color: $primary; }LESS output:
@primary: #4f46e5;
.card(@p: 1rem) { padding: @p; }
.btn { .card(1.5rem); color: @primary; }How it works
It applies a best-effort line-and-token rewrite ($var to @var, @mixin/@include to LESS mixins, #{} to @{}, @extend to :extend). It does not run a SASS compiler, so advanced control flow and functions are flagged but not fully translated.
Good to know
SASS to LESS is a browser-based syntax converter that rewrites SCSS/SASS source into LESS-style syntax. It is aimed at front-end developers who are migrating a stylesheet or a component library off SASS, or who need to drop SCSS snippets into a LESS-based build (for example an older Bootstrap 3 theme or an Ant Design project). The whole transform runs locally in your browser, so you can paste proprietary stylesheets without anything being uploaded.
Reach for it when you have hand-written SCSS and want a fast first pass at the equivalent LESS rather than retyping every $var, mixin and interpolation by hand. It handles the mechanical, repetitive swaps: $primary becomes @primary, @mixin card() / @include card() become LESS dot-mixin definitions and calls, #{...} interpolation becomes @{...}, and @extend .btn becomes &:extend(.btn).
Read the result alongside the status bar above the output. A green "Converted to LESS syntax" message means every line had a clean mapping; an amber message lists how many lines need manual review and inserts inline [sass2less] comments at those exact lines. Treat those comments as a to-do list: anything involving SASS logic that LESS cannot express the same way is flagged, not silently translated.
The main caveat is that this is a text-level rewrite, not a compiler, so it never evaluates your SASS. Things with no clean LESS analogue are where it stops short, including:
@function definitions, @if/@else/@for/@each/@while control flow, and @return- SASS maps, the
!default and !global flags, and @content blocks - built-in color/math helpers such as
lighten(), which keep their SASS names and will not run in a LESS compiler until you swap them for LESS equivalents
Frequently asked questions
Does this run a real SASS compiler?
No. There is no reliable SASS compiler that runs purely in the browser, so this is a syntactic find-and-replace transform. It rewrites variables, mixins, includes, interpolation and @extend, but it does not evaluate SASS logic.
Why are some lines marked with [sass2less] comments?
SASS features like @function, @if/@for/@each control flow, maps and !default have no direct LESS equivalent. Those lines are flagged with inline comments and a status warning so you can 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 SASS and LESS?
Both are CSS preprocessors that add variables, nesting, mixins and reuse to plain CSS. SASS (in its SCSS syntax) uses $ for variables and @mixin/@include, runs on Ruby or Dart Sass, and has richer logic like functions and control flow; LESS uses @ for variables and dot-style mixins, and was historically run in JavaScript. The core nesting and variable concepts map closely, which is why a syntactic converter handles most everyday code.
Can I convert SCSS to LESS automatically?
You can automatically convert the syntax, but not the logic. Tools like this one rewrite variables, mixins, includes, interpolation and @extend automatically, while SASS-specific features such as functions, loops and maps have no direct LESS equivalent and need manual rewriting.
Why does my converted LESS still use lighten() and other SASS functions?
The converter only changes syntax, not function calls, so SASS color and math helpers keep their original names. LESS has its own functions (for example lighten() also exists in LESS but darken/fade and others differ), so you should verify each function against the LESS docs and adjust any that are not supported.
How do I convert a SASS @each or @for loop to LESS?
LESS has no @each or @for statements; the usual approach is recursive mixins with guards (a mixin that calls itself with a decremented counter and a when() condition), or LESS list functions like extract() and length(). The converter flags these lines with a comment so you can rewrite them by hand.
Does converting SCSS to LESS change how my CSS output looks?
If the conversion is done correctly, the final compiled CSS should be equivalent. However, because this is a best-effort syntactic transform that skips SASS logic, you must compile the LESS yourself and compare the output before assuming it matches.
Is LESS still maintained, and should I migrate to it?
LESS is still maintained but its momentum has slowed compared with SASS/SCSS and with using plain CSS custom properties plus tooling like PostCSS. People typically convert toward LESS only when a specific framework or legacy codebase requires it, rather than as a forward-looking choice.
What does the [sass2less] comment in my output mean?
It is a marker the converter inserts on any line it could not fully translate, such as @function, control flow, maps, !default or @content. It tells you exactly where manual work is needed so nothing is silently lost.
Can I convert LESS back to SASS with this tool?
Not with this page, which only goes from SASS/SCSS to LESS. CalcCafe lists separate converters for the reverse direction, including LESS to SASS and LESS to SCSS.
Related tools