LESS to SCSS

Convert LESS variables, mixins, and functions to SCSS.

LESS to SCSS Converter

Moving a project from LESS to Sass – for example when upgrading from Bootstrap 3 to Bootstrap 4 or newer – means rewriting every variable, mixin, and escape. This converter does the mechanical part for you and tells you exactly what needs a human decision.

Translation table

LESS SCSS
@primary: #d10505; $primary: #d10505;
.rounded(@r: 4px) { … } @mixin rounded($r: 4px) { … }
.rounded(8px); @include rounded(8px);
&:extend(.btn); @extend .btn;
.col-@{i} .col-#{$i}
~"calc(100% - @{w})" unquote("calc(100% - #{$w})")
fade(@c, 50%) rgba($c, 0.5)
spin(@c, 10) adjust-hue($c, 10)
@map[key] map-get($map, key)

Semicolon-separated mixin arguments (.m(1px; solid)) are understood, and a plain class used as a mixin (.uses { .plain; }) becomes @extend .plain because SCSS cannot include ordinary rules.

What needs attention

  • Guards (when (iscolor(@c))) have no direct SCSS form. They are removed and listed in the conversion notes so you can add an @if inside the mixin.
  • Variable variables (@@name) and namespaced calls (#ns > .mixin()) are converted on a best-effort basis and reported.
  • Lazy evaluation: LESS variables can be used before they are defined; Sass needs them first. Move variable blocks to the top.

Verified output

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. Small differences can come from color functions like darken(), which LESS and Sass calculate on slightly different color models.

Compile the result with the SCSS Compiler, or convert to the indented syntax with LESS to Sass.

Frequently Asked Questions

It converts the syntax of each file: variables, mixins, guards, extends, escapes, and interpolation. Because @import cannot load other files in the browser, convert each file separately and check the conversion notes.

SCSS has no guard syntax. The guard is removed and listed in the notes; add an @if inside the mixin to restore the condition.

Most often because of color functions such as darken() or lighten(), which LESS and Dart Sass compute slightly differently, or because @extend orders selectors differently than LESS mixin calls.