SASS to LESS Converter

Paste indented SASS and get LESS output — braces, variable sigils, and mixin syntax are mapped to LESS conventions.

Last updated: May 25, 2026

SASS Input

LESS Output

@primary: #0f766e;
@spacing: 1rem;

.flex-center() {
  display: flex;
  align-items: center;
  justify-content: center;

}
.card {
  background: white;
  padding: @spacing;

  &:hover {
    background: lighten(@primary, 40%);

  }
  .title {
    color: @primary;
    font-size: 1.25rem;

  }
}
.hero {
  .flex-center();
  min-height: 100vh;
}

Converts indented SASS to LESS. Adds braces, maps $var → @var, and rewrites =mixin/+include shorthand to LESS .mixin() syntax.

Client-Side Processing

Input Data Stays on Device

Instant Local Execution

Find this tool useful? Support the project to keep it free!

Buy me a coffee

What is SASS to LESS Converter?

SASS and LESS are sibling CSS preprocessors with overlapping ideas but different syntax. SASS (indented) uses whitespace-based blocks, `$variables`, and the `=name`/`+name` shorthand for mixin definitions and calls. LESS uses curly braces and semicolons, `@variables`, and treats mixins as parametric class selectors written like `.name() { ... }` and called with `.name();`.

This converter performs the SASS-to-SCSS pass (adding braces and expanding shorthand) and then the SCSS-to-LESS pass (swapping variable sigils, rewriting mixin/include directives). Nested selectors and parent references (`&`) are valid LESS already and pass through unchanged.

It is well suited for projects standardising on LESS, integrating a few SASS components into a LESS codebase, or just comparing the syntax differences in one place. Sass-only features such as control flow, `@function`, modules, and colour helpers do not have LESS equivalents and may need manual rework after conversion.

How to Use SASS to LESS Converter

Paste indented SASS code into the input panel.

The LESS output appears instantly on the right.

Inspect the rewritten variables and mixins.

Copy the LESS or download it as a .less file.

Replace any unsupported Sass helpers manually (LESS has its own colour functions).

Common Use Cases

Standardise on LESS in a project that has a few legacy SASS files.
Integrate a SASS component into a LESS-based design system.
Compare equivalent variable and mixin syntax between the two preprocessors.
Migrate documentation snippets from SASS to LESS without installing toolchains.
Pre-process a SASS partial into LESS for a build pipeline that only consumes LESS.

Example Input and Output

Convert SASS variables and a mixin to LESS equivalents.

SASS input

$primary: #0f766e
=flex-center
  display: flex

.hero
  +flex-center
  color: $primary

LESS output

@primary: #0f766e;
.flex-center() {
  display: flex;
}
.hero {
  .flex-center();
  color: @primary;
}

Privacy

All conversion happens locally in your browser. No SASS or LESS is transmitted to any server.

Sass-only features

Sass modules (@use/@forward), @function, @if/@for/@each control flow, and parameter defaults beyond simple defaults are not represented in LESS. Review and rework these manually after conversion.

Frequently Asked Questions

Can LESS read SASS files directly?

No. LESS and SASS use different variable sigils and mixin syntax. This tool rewrites the syntactic differences so the result is valid LESS.

What about Sass functions like lighten() or darken()?

LESS has its own implementations of lighten(), darken(), mix(), fade(), and friends. Most simple calls remain valid, but verify the argument order and naming.

Are nested selectors converted?

Nested selectors and & parent references use the same syntax in both SCSS and LESS, so they pass through after the brace and shorthand conversion.

Does my SASS get uploaded?

No. Conversion runs entirely in your browser — nothing is sent to a server.