SASS to LESS Converter Online

Translate indented SASS into LESS — $ variables become @ variables, braces and semicolons added. 100% in your browser.

Input SASS

LESS Output

What is a SASS to LESS Converter?

A SASS to LESS converter rewrites the indented Sass syntax into LESS. Two main changes happen: every $variable becomes @variable (LESS uses @), and braces and semicolons are added because LESS keeps the CSS-style block syntax. The output is a valid .less file that compiles with lessc or less.js.

SASS and LESS solve the same problems but in different syntactic styles. Migration goes both ways and the converter handles 90% of stylesheets without manual cleanup.

How to convert SASS to LESS — 4 steps

Paste your SASS. Drop a .sass file into the Input panel, or click Load Sample.
Click Convert. Variables are renamed ($primary to @primary), braces are added around each block, and semicolons are appended.
Review the LESS. Confirm @variables, nested rules, and pseudo-classes look right. Mixins need a manual rewrite to .name() syntax.
Save as .less. Compile with lessc input.less output.css or load via less.js in the browser.

Sample SASS in, LESS out

Input — SASS (indented)

$primary: #66ccff
$padding: 12px

.nav
  display: flex
  align-items: center
  padding: $padding 24px
  background: #1a1a1a

  a
    color: #fff
    margin-right: 16px

    &:hover
      color: $primary

Output — LESS

@primary: #66ccff;
@padding: 12px;

.nav {
  display: flex;
  align-items: center;
  padding: @padding 24px;
  background: #1a1a1a;
  a {
    color: #fff;
    margin-right: 16px;
    &:hover {
      color: @primary;
    }
  }
}

$ to @ Variables

Every Sass $variable becomes a LESS @variable in declarations and references — the only sigil change between the two.

Braces and Semicolons

Indentation is converted to brace-wrapped blocks; each declaration ends with a semicolon. Output is standard LESS.

Client-Side Only

Translation runs in JavaScript inside your browser. .sass source never leaves your machine.

Common use cases

check_circleMigrating a Sass codebase into a Bootstrap 3 project (Bootstrap 3 uses LESS)
check_circleStandardising a multi-app design system on LESS
check_circlePorting Ant Design v3 themes from Sass into a LESS-based fork
check_circleConverting Sass tokens to .less for in-browser less.js usage
check_circleProducing .less partials from existing .sass component files
check_circleBootstrapping a LESS-based design system from Sass source
check_circleSide-by-side compare indented SASS vs LESS on a real component
check_circleModernising a Sass codebase to a LESS-based legacy project

SASS vs LESS — when to migrate

Sass is the dominant CSS preprocessor today; LESS is still maintained but development is slower. The migration most teams do is the other direction — LESS to Sass — because Sass has wider modern adoption (Bootstrap 4+, Material UI, Vite). Converting Sass to LESS makes sense when you need to integrate with a Bootstrap 3 codebase, an enterprise project standardised on LESS, or use less.js for in-browser rendering. For new greenfield projects, stick with Sass — see SCSS to CSS for the standard compile path.

Need to go further?

Convert between every CSS preprocessor — all browser-side.

LESS to SASS SASS to CSS LESS to CSS

Frequently Asked Questions

Are LESS and SASS compatible?

No — they are independent languages with different parsers. Both share concepts (variables, mixins, nesting) but use different sigils ($name vs @name) and different mixin syntaxes (@mixin/@include vs .name()). The converter handles syntax-level translation; mixin-heavy stylesheets need a manual pass.

What features do not translate cleanly?

Sass @if/@each/@for control structures have no direct LESS equivalent — LESS uses guards on mixin definitions instead. Sass @function declarations need rewriting as LESS mixins with returns. Sass map types (key-value) have no LESS equivalent. The 90% case (variables, declarations, nesting) translates losslessly.

Why convert to LESS at all?

Bootstrap 3 used LESS, so older themes ship as .less. Some legacy enterprise codebases standardised on LESS years ago and never migrated. less.js runs in the browser without a build step — a unique feature among preprocessors. Convert when you need to integrate with one of these LESS-based ecosystems.

Will the LESS output compile with lessc?

Yes. The output is standard LESS that compiles with the lessc CLI, less-loader for webpack, or less.js in the browser. Save with a .less extension and run lessc input.less output.css.

How are SASS mixins translated?

SASS uses @mixin name { ... } and @include name. LESS uses .name() { ... } and .name();. The converter handles syntax for variables and structure but mixin definitions and call sites need a manual rewrite — usually under 10 minutes for a typical component.

Does the converter handle @media queries?

Yes. @media (min-width: 768px) blocks become brace-wrapped media rules. Nested @media inside selectors works in LESS too — the converter preserves the structure.

Are nested selectors preserved?

Yes. LESS supports the same nested-selector syntax — each indented child block becomes a brace-wrapped child rule. The & parent reference works identically in both languages.

Is my source uploaded?

No. Conversion runs entirely in your browser as JavaScript. .sass source never leaves the device. Verify in DevTools — Network tab stays empty when you click Convert.