Why migrate from LESS to SCSS?

SCSS has broader tooling, more active maintenance, and better module support (@use, @forward). Most teams picking a preprocessor today go SCSS.

What's the variable syntax change?

LESS uses @color, SCSS uses $color. The converter rewrites every variable declaration and reference.

LESS's `.mixin()` becomes SCSS's `@mixin mixin` + `@include mixin`. Default values and variadics carry over.

Are LESS guards supported in SCSS?

SCSS uses @if inside @mixin; LESS uses `when` after the mixin signature. The tool rewrites guards into @if blocks.

LESS to SCSS | DevTools Surf

DevTools Surf

Example: LESS to SCSS

A worked example, rendered from real sample data. Sign in to run the tool on your own input.

Input

@primary: #3b82f6;
@size: lg;

.rounded(@r: 0.5rem) {
  border-radius: @r;
}

.card {
  background: @primary;
  padding: 1rem;
  .rounded();
  &:extend(.shadow all);
  width: ~"calc(100% - 2rem)";
}

.btn-@{size} {
  font-size: 1.125rem;
}

.shadow {
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

Output

$primary: #3b82f6;
$size: lg;

@mixin rounded($r: 0.5rem) {
  border-radius: $r;
}

.card {
  background: $primary;
  padding: 1rem;
  @include rounded;
  @extend .shadow;
  width: unquote("calc(100% - 2rem)");
}

.btn-#{$size} {
  font-size: 1.125rem;
}

.shadow {
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

About LESS to SCSS

Convert LESS to SCSS syntax. Part of the DevTools Surf developer suite. Browse more tools in the CSS collection.

Use Cases

Teams following Bootstrap's migration path from LESS to SCSS
Developers adopting SCSS for better function and control-flow support
Projects standardizing on SCSS to access a larger ecosystem of tools
Frontend teams switching from LESS to SCSS for native @use module support

Tips

Check that LESS @variables convert to SCSS $variables correctly
Verify that LESS .mixin() calls become SCSS @include directives
Review LESS extend syntax for compatibility with SCSS @extend

Fun Facts

The migration from LESS to SCSS became widespread after Bootstrap 4 switched from LESS to SCSS in 2018.
LESS uses @ for variables and SCSS uses $, because @ in SCSS is reserved for at-rules like @media and @import.
Both LESS and SCSS compile to identical CSS output, so migration is purely a developer experience change.

FAQ

Why migrate from LESS to SCSS?: SCSS has broader tooling, more active maintenance, and better module support (@use, @forward). Most teams picking a preprocessor today go SCSS.
What's the variable syntax change?: LESS uses @color, SCSS uses $color. The converter rewrites every variable declaration and reference.
Do mixins translate?: LESS's `.mixin()` becomes SCSS's `@mixin mixin` + `@include mixin`. Default values and variadics carry over.
Are LESS guards supported in SCSS?: SCSS uses @if inside @mixin; LESS uses `when` after the mixin signature. The tool rewrites guards into @if blocks.

Related CSS Tools

Minify CSS CSS Beautifier CSS Formatter CSS Pretty Print CSS to LESS CSS to SCSS CSS to SASS CSS to Stylus