SCSS to LESS

Convert SCSS to LESS, including loops and conditions.

SCSS to LESS Converter

Most converters stop at variables and nesting. This one also translates Sass control flow into the idioms LESS actually uses, so the result compiles and produces the same CSS.

Basics

SCSS LESS
$gap: 8px; @gap: 8px;
@mixin m($a) { } / @include m(1px); .m(@a) { } / .m(1px);
%base / @extend %base; .base / &:extend(.base);
#{$name} @{name}
unquote("…") ~"…"
rgba($c, 0.5) fade(@c, 50%)
map-get($m, key) @m[key]

Control flow

  • @for $i from 1 through 3 becomes a recursive mixin with a guard – the standard LESS loop: .loop-i(@i) when (@i =< 3) { … .loop-i((@i + 1)); } .loop-i(1);
  • @each $x in $list becomes LESS's each() function, with $x renamed to @value.
  • @if / @else if / @else become CSS guards: & when (@mode = dark) { … }, with each @else branch negating the previous conditions.
  • @content becomes a detached-ruleset parameter: the mixin gets @content: {} and calls pass @content: { … }.

What LESS cannot express

@function, @use/@forward, @while, and @debug have no LESS equivalent. They are written as comments and listed in the conversion notes. !default is dropped because LESS variables are lazily evaluated – the last definition wins. Placeholder selectors become real classes, so a .base rule appears in the CSS.

Verified

After every conversion the page compiles your input and the result with the real compilers and compares the CSS, so you can see at a glance whether the translation is exact. Try the built-in sample to see a loop and a mixin with default arguments converted and verified. Compile LESS with the LESS Compiler.

Frequently Asked Questions

Yes, with recursive mixins guarded by a condition. The converter generates that pattern automatically, so @for loops keep working.

LESS has no user-defined functions. The function is commented out and listed in the notes; replace calls with a mixin or a calculated variable.

LESS has no %placeholder selectors. The placeholder becomes a normal class, which is extended in the same way but also appears in the compiled CSS.

LESS has no !default flag. Because LESS variables are lazy and the last definition wins, the converter drops the flag and notes it.