Sass to LESS

Sass to LESS Converter

Translate .sass files written in the indented syntax directly into LESS. The converter reads the indentation-based structure, the =/+ mixin shorthands, and Sass control flow, then writes LESS that compiles with the official LESS compiler.

From indented Sass to LESS

$c: red
=m($x)
  color: $x
@each $n in 1, 2
  .w-#{$n}
    width: $n * 10px

@c: red;

.m(@x) {
  color: @x;
}

@n-list: 1, 2;
each(@n-list, {
  .w-@{value} {
    width: @value * 10px;
  }
});

Key translations

• $var: value → @var: value; and #{$var} → @{var}.
• =name($a: 1) → .name(@a: 1); +name(2) → .name(2);.
• @extend .x → &:extend(.x);, placeholders become classes.
• @for → recursive guarded mixin; @each → each(); @if/@else → & when (…) guards.
• Mixins that use @content receive a detached ruleset parameter.
• Sass maps become LESS maps, and map-get() becomes @map[key] lookups.

Limits

LESS has no user-defined functions, no @while, and no module system. Those parts are commented out and explained in the conversion notes, and !default flags are dropped because LESS variables follow "last definition wins". Conditions are converted when they are simple comparisons joined with and/or; anything more complex is commented out for manual 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. Check the CSS with the LESS Compiler, or convert to brace syntax first with Sass to SCSS.

Typical workflow

Convert your variables file first and keep it at the top of the LESS entry file, then convert mixin files, and finally the component styles. LESS reads variables lazily, so the order matters less than in Sass, but keeping the same structure makes the migration easier to review in a pull request. Run the converted code through the LESS compiler after each file to catch problems early, and compare the compiled CSS with your old build output.