LESS to Sass

LESS to Sass Converter

This tool translates LESS into the indented Sass syntax used in .sass files: no braces, no semicolons, mixins defined with = and included with +. It is the right choice if your Sass project already uses the indented style; for brace-based Sass use LESS to SCSS.

How LESS constructs map to indented Sass

@gap: 8px;
.stack(@space: @gap) {
  > * + * { margin-top: @space; }
}
.list { .stack(16px); }

$gap: 8px

=stack($space: $gap)
  > * + *
    margin-top: $space

.list
  +stack(16px)

• @variables become $variables; @{interpolation} becomes #{$interpolation}.
• Parametric mixins (.name(@a; @b: 1)) become =name($a, $b: 1); calls become +name(…).
• &:extend(.x) becomes @extend .x.
• Escapes ~"…" and e("…") become unquote("…"); fade() becomes rgba() and spin() becomes adjust-hue().
• Detached-ruleset maps (@config: { a: 1px; }) become Sass maps and @config[a] becomes map-get($config, a).

Indentation rules to remember

Indented Sass has no braces, so every nested level must be indented consistently. The converter writes 2 spaces by default; choose 4 spaces or tabs to match your codebase. Empty rule blocks are skipped because indented Sass cannot express them – they produce no CSS anyway.

Check and review

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. Anything that could not be translated one-to-one, such as LESS guards or pattern-matching mixin arguments, appears in the conversion notes below the editors.

Compile the output with the Sass Compiler to inspect the CSS. Because LESS imports cannot be loaded in the browser, convert a multi-file project one file at a time, starting with the file that defines your variables and mixins, and keep the same order in your Sass entry file.