LESS to SASS Converter Online

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

Input LESS

SASS Output

What is a LESS to SASS Converter?

A LESS to SASS converter translates a .less file into the indented Sass syntax (.sass extension). Two main changes happen: every @variable becomes $variable (LESS uses @, Sass uses $), and the braces and semicolons get stripped because indented SASS uses whitespace for structure. CSS at-rules like @media and @keyframes stay intact.

LESS and Sass solve the same problems — variables, mixins, nesting — but the Sass ecosystem has the wider modern adoption. Migrating LESS to indented SASS is the most concise destination if you value indentation over braces.

How to convert LESS to SASS — 4 steps

Paste your LESS. Drop a .less file into the Input panel, or click Load Sample for a starter.
Click Convert. Variables are renamed (@primary to $primary), braces and semicolons are stripped, and indentation defines structure.
Review the SASS. Confirm variables, selectors, nested rules, and pseudo-classes look right. Mixins need a manual @mixin/@include pass.
Save as .sass. Use the .sass extension and compile with sass input.sass output.css.

Sample LESS in, SASS out

Input — 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;
    }
  }
}

Output — 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

@ to $ Variables

Every LESS @variable becomes a Sass $variable. CSS at-rules (@media, @keyframes) are correctly excluded from the rename.

Indent-Based Output

Braces and semicolons are stripped. Structure carries over via 2-space indentation — the indented SASS standard.

Client-Side Only

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

Common use cases

check_circleMigrating a Bootstrap 3 codebase from LESS to Sass for Bootstrap 4+
check_circleStandardising a multi-app design system on Sass instead of LESS
check_circlePorting Ant Design v3 LESS themes to Sass for newer toolchains
check_circleConverting LESS components to .sass for Vite Sass integration
check_circleProducing .sass partials from existing LESS component files
check_circleBootstrapping a Sass-based design system from LESS source
check_circleSide-by-side compare LESS vs indented SASS on a real component
check_circleModernising legacy LESS codebases to the dominant Sass preprocessor

LESS vs Sass — what to expect

LESS and Sass solve the same problems — variables, mixins, nesting, partials — but Sass has wider modern adoption. Bootstrap moved from LESS (v3) to Sass (v4+). Most enterprise design systems use Sass. Dart Sass releases are frequent; LESS development is steady but slower. The migration cost is mostly mechanical: variable sigils, mixin call syntax, and a handful of language-feature differences (LESS guards vs Sass @if). For 90% of stylesheets the converter does the work; for the remaining 10% (mixins, guards), plan a quick manual pass.

Need to go further?

Convert between every CSS preprocessor — all browser-side.

SASS to LESS LESS to CSS SASS to CSS

Frequently Asked Questions

What is the difference between @ and $ variables?

LESS uses @ as the variable sigil (@primary: #66ccff;). Sass uses $ ($primary: #66ccff;). The conversion is mechanical — every @name (except CSS at-rules like @media, @keyframes, @import) becomes $name. The converter recognises the at-rule whitelist and leaves @media untouched.

Should I use SASS over LESS?

For new projects, yes. Sass is the most active CSS preprocessor — Dart Sass ships monthly releases, ecosystem support is broadest, and most modern frameworks (Bootstrap 4+, Material UI, Vite, Angular CLI) use Sass natively. LESS is still maintained but development is slower. Migrate if you are starting fresh or want the best long-term tooling.

Why convert to indented SASS specifically and not SCSS?

Indented SASS is more concise — no braces, no semicolons. Some teams prefer the visual cleanliness. SCSS is more familiar to CSS developers. Both compile to the same output and use the same Sass compiler. If you want the brace-and-semicolon flavour, see LESS to SCSS instead (forthcoming) or use the Sass compiler with .scss extension.

How are LESS mixins translated?

LESS mixin definitions look like .name() { ... }; Sass uses @mixin name { ... } and @include name. Call sites also differ. The converter handles variable and structural translation; mixin definitions and call sites need a manual rewrite — usually under 10 minutes for a typical component.

What about LESS guards and conditionals?

LESS uses .mixin() when (@var > 0) syntax for guards. Sass uses @if / @else inside an @mixin. These language features need a manual port — the converter focuses on the 90% case (variables, declarations, nesting).

Will the SASS output compile with Dart Sass?

Yes. Save with a .sass extension (not .scss) and run sass input.sass output.css. Dart Sass autodetects the indented syntax from the file extension. sass-loader and Vite plugins do the same.

Does the converter handle @media queries?

Yes. The converter recognises @media as a CSS at-rule, not a LESS variable, and leaves the @ prefix intact. The braces are still stripped and the structure becomes indent-based.

Is my source uploaded?

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