SASS to LESS Converter

What the SASS to LESS converter does

Moving styles from an indented-syntax Sass project to LESS means changing both the punctuation and the language. This SASS to LESS converter handles the whole job in two steps: Dart Sass compiles the .sass input, evaluating variables and =/+ mixins, and the resulting CSS is re-nested and printed with LESS's braces and semicolons.

Example

$brand: #0f766e
=truncate
  overflow: hidden
  text-overflow: ellipsis
nav
  a
    color: $brand
    +truncate
    &:hover
      text-decoration: underline

nav a {
  color: #0f766e;
  overflow: hidden;
  text-overflow: ellipsis;
  &:hover {
    text-decoration: underline;
  }
}

The +truncate include was expanded into its two declarations. Because nav had no declarations of its own, the converter collapsed nav and a into the single selector nav a, avoiding an empty wrapper block.

From indented Sass to LESS syntax

Note that equality is == in Sass but = in LESS guards, a frequent source of errors in hand translations. Logical operators differ too: Sass writes and, or and not in @if conditions, while LESS guards combine conditions with and, a comma for “or”, and when not.

Limitations

• Variables and mixins are resolved to values in the output; recreate shared definitions manually if you need them.
• The input must be valid indented Sass; SCSS pasted here fails because braces and semicolons are not allowed. Use SCSS to LESS for SCSS.
• Local partials cannot be loaded.

Indented Sass that fails to compile

Because the converter compiles the input first, any error in the indented syntax stops the conversion. The usual causes are:

• Mixed indentation. A file must indent consistently with either spaces or tabs. Code copied from several sources often mixes them, which Dart Sass rejects.
• Long selector lists. A selector can continue onto the next line only when the line ends with a comma, as in h1, followed by h2 at the same indentation.
• Braces or semicolons. Even one leftover ; at the end of a declaration is invalid in .sass files.
• Imports. @use or @import of your own partials cannot be resolved here; paste the partial's variables and mixins above the code instead.

The status bar gives the line number, which points to the first indented block that needs fixing.

Common mistakes when porting by hand

• Division: Sass uses math.div($a, 2); LESS 4 divides only inside parentheses, (@a / 2).
• Defaults: !default has no LESS counterpart. Because LESS variables are lazy, a later definition overrides an earlier one, so place theme overrides after the defaults.
• Interpolation: #{$name} becomes @{name}, and in selectors the variable must hold a plain string.
• Placeholders: %base does not exist in LESS; use a class with parentheses (.base() { }) so it is not output on its own.
• Loops: @each and @for become recursive mixins or the each() function.

The evaluated output from this converter is a reliable reference for checking any hand-ported code.

Verify the output with the LESS Compiler. The conversion runs entirely in your browser.