CodesBeautify

SCSS to LESS Converter

Convert a braced SCSS file into LESS, translating variables, mixin definitions and include calls as it goes.

SCSS
LESS
Runs locally in your browser

About the SCSS to LESS Converter

Most people arrive here because a component library or admin theme they need to extend is built on LESS while their own design system is written in SCSS. The two dialects look almost identical on the page, and this converter changes only what has to change: $name becomes @name throughout, and #{$name} interpolation becomes @{name} so it still works inside selectors and property names.

Mixins get restructured rather than renamed. An @mixin panel($pad: 24px) block turns into the ruleset .panel(@pad: 24px), and every @include panel(20px); becomes a call written as .panel(20px);. That is the whole of the LESS mixin system, so once the conversion is done there is nothing extra to import or register. An @extend statement is emitted in the &:extend() form LESS understands.

Watch out for the parts LESS cannot express. Sass maps, @function definitions and the @each, @for and @while directives are copied through so nothing is silently lost, but each one needs rebuilding with LESS guards and recursive mixins. Module loading with @use has no equivalent either, since LESS keeps everything in one flat namespace and you will need plain @import instead. Colour helpers overlap closely, and functions such as lighten and darken exist in both with the same arguments. Compile the result with the LESS Compiler to confirm it builds.

How to use

  1. Paste your SCSS or upload a .scss file.
  2. Convert, then scan the output for any @each, @function or map syntax that was passed through untranslated.
  3. Rewrite those blocks using LESS guards and recursive mixins.
  4. Download the file with a .less extension and compile it.

Common questions

Can LESS do everything SCSS can?
Not quite. LESS has no map type, no user defined functions and no module system, so loops and lookups need rebuilding with guarded recursive mixins.
How do I convert @use and @forward?
Replace them with plain @import. LESS has a single global namespace, so any names you were addressing through a module prefix become bare names.
Are colour functions compatible?
The common ones line up. lighten, darken, saturate, fade and mix all exist in LESS with the same argument order, so most theme files need no edits.
Does the tool change my selector nesting?
No. Nesting is reproduced exactly as written, including the ampersand parent reference, which behaves the same way in both languages.