About the LESS to SCSS Converter
This is the gentlest of the preprocessor migrations, because SCSS and LESS share the same braced shape. The parser walks your file, keeps the nesting exactly as you wrote it, and changes only the tokens that differ between the two languages. Every @name variable is rewritten as $name, and any at-rule keyword the language actually owns is left in place so a media query never turns into a variable declaration.
Mixins are the part worth reviewing. LESS treats a parameterised ruleset as a mixin and lets you invoke it by writing its selector, which means .panel(20px); inside a block is a call and not a nested rule. SCSS wants an explicit @mixin definition and an @include at each call site, so both halves are rewritten. Parameter defaults survive the trip, and argument lists separated by semicolons in LESS are normalised to the commas SCSS expects.
Three constructs need your attention afterwards. Guards written with when stay as they are and should become @if; a :extend() in a selector becomes an @extend statement only when it appears on its own line; and LESS evaluates variables lazily, taking the last definition in a scope, whereas Sass reads them top down, so a variable redefined after it is used will behave differently. Search for redefinitions before you delete the old file. Once the SCSS looks right, the SCSS Compiler will tell you whether it builds.
How to use
- Paste the LESS source into the left pane, or upload the file.
- Pick an indent width to match the rest of your project.
- Convert, then read through the @mixin blocks the tool produced to check the parameter defaults survived.
- Download the result as a .scss file and compile it.
Common questions
- Does LESS variable scoping match Sass?
- Not exactly. LESS resolves a variable to the last definition in its scope, while Sass reads assignments in source order, so a value redefined below its use changes meaning.
- How is a LESS import handled?
- The statement is kept as written. You will want to switch to @use in modern Sass, since @import is deprecated and resolves partials differently.
- Can I convert a whole folder at once?
- This page handles one file at a time. Convert each partial separately and keep the same file names so your import statements still resolve.
- What about LESS built in functions such as fade?
- Function calls are copied unchanged. Sass has close equivalents, for example rgba or color.adjust, so map them by hand after converting.