LESS to SCSS Converter Online — Free Tool

Convert LESS to SCSS. Translate @variables to $variables, adjust mixin syntax, and migrate legacy LESS codebases to a Sass build pipeline — 100% in your browser.

Input LESS

SCSS Output

What is a LESS to SCSS Converter?

A LESS to SCSS converter rewrites a LESS stylesheet into the SCSS syntax used by Sass — translating @variables to $variables, .mixin() calls to @include mixin(), and adjusting a handful of function names. Nesting, parent references, media queries, and pseudo-classes look the same in both languages, so most of the file passes through unchanged.

This is the right tool for migrating Bootstrap 3 customisations, Ant Design v3 themes, or any legacy LESS codebase to a modern Sass build pipeline. The OpenFormatter converter runs entirely in your browser — no upload, no rate limit, no account required.

How to convert LESS to SCSS — 4 steps

Paste your LESS. Drop the LESS source — variable definitions, mixins, and rules — into the Input panel, or click Load Sample.
Click Convert. @variables become $variables automatically. The output is valid SCSS for the Sass compiler.
Refine mixins. Review mixin definitions and prepend @mixin; rewrite .mixin() calls as @include mixin(). The regex cannot infer these perfectly without a full LESS parse.
Compile with Sass. Save as .scss and run sass input.scss output.css with Dart Sass to verify the result.

Sample LESS in, SCSS out

Input — LESS

@primary: #0066cc;
@radius: 4px;

.button {
  background: @primary;
  border-radius: @radius;
  padding: 8px 16px;
  &:hover {
    background: darken(@primary, 10%);
  }
}

Output — SCSS

$primary: #0066cc;
$radius: 4px;

.button {
  background: $primary;
  border-radius: $radius;
  padding: 8px 16px;
  &:hover {
    background: darken($primary, 10%);
  }
}

Variable Translation

LESS @variable declarations and references become SCSS $variables in one pass. Trailing colons and expression contexts are preserved.

Sass-Compiler Ready

The output compiles with Dart Sass and node-sass. Most files compile cleanly; mixin signatures may need a small manual touch-up.

Client-Side Only

Conversion runs in JavaScript inside your browser. Brand themes and proprietary design tokens never leave your machine.

Common use cases

check_circleMigrating a Bootstrap 3 LESS customisation file to Bootstrap 4+ SCSS
check_circleTranslating an Ant Design v3 LESS theme to a Sass-compatible build
check_circleConverting LESS component styles into a Vite or webpack SCSS pipeline
check_circleRefactoring a legacy LESS design system to modern Sass tooling
check_circleTranslating LESS @variable definitions into SCSS $variable design tokens
check_circleMigrating a project from less-loader to sass-loader in webpack
check_circleConverting LESS snippets from documentation into a SCSS codebase
check_circleProducing SCSS partials from a vendor LESS source for further refinement

LESS vs SCSS — what stays, what changes

Both languages share a near-identical model: nested selectors, parent references (&), @media queries, and pseudo-classes look the same in both. What changes are surface-level: @ versus $ for variables, .mixin() versus @include mixin(), and a small set of function-name differences. For most files the conversion is mechanical and reversible — use the SCSS to LESS converter if you ever need to go the other way. The deeper change comes when you adopt SCSS-specific features like @use namespacing, @function, and module partials, which have no direct LESS equivalent.

Need to go further?

Convert, format, or compile across every CSS preprocessor — all browser-side.

SCSS to LESS LESS to CSS CSS to SCSS

Frequently Asked Questions

What changes when LESS becomes SCSS?

Three things: variable sigils (@primary becomes $primary), mixin call syntax (.clearfix() becomes @include clearfix()), and a few function-name differences (LESS percentage(), unit() vs Sass equivalents). Nesting, parent-references (&), media queries, and pseudo-classes look the same in both languages, so most of the file stays untouched.

Why migrate from LESS to SCSS at all?

SCSS / Sass is the more actively-developed preprocessor — Dart Sass ships frequent releases, while LESS development has slowed. Most modern frameworks (Bootstrap 4+, Material UI, Tailwind compatibility tooling) target SCSS. If your team is reaching for new frontend tooling, an SCSS codebase has more options. The converter gets you to a working .scss file in seconds.

How does the variable conversion work?

The converter rewrites @name: value declarations as $name: value, and @name references as $name. Trailing colons are preserved (so @primary: #fff becomes $primary: #fff), and bare uses inside expressions like background: @primary become background: $primary. The compiled CSS is identical.

What about LESS mixin calls like .clearfix()?

LESS treats any class with a parameter list as a mixin call — .clearfix() invokes a previously-defined .clearfix() ruleset. SCSS uses explicit @mixin / @include syntax. After conversion, manually rewrite .clearfix() calls as @include clearfix(); the converter highlights candidates but cannot infer mixin definitions perfectly without a full LESS parse.

Does the converter handle parameterised mixins?

Variable references inside mixin definitions are translated (@param becomes $param). The mixin signature itself often needs a small rewrite: LESS .border-radius(@r) becomes SCSS @mixin border-radius($r). After conversion, review each mixin definition and prepend @mixin to make it valid SCSS.

What about LESS color functions like darken() and lighten()?

darken(), lighten(), spin(), saturate(), desaturate(), and mix() exist in both LESS and Sass with the same signatures. These pass through unchanged. Note: modern Dart Sass deprecates darken() / lighten() in favour of color.adjust() and color.scale() — the legacy names still work but consider migrating long-term.

Are LESS @import statements converted?

Yes. @import statements work the same way in SCSS — the converter leaves them as-is. Note that modern SCSS recommends @use and @forward over @import for namespacing, but @import remains supported. If you want to switch to @use during migration, do it as a separate manual pass after conversion.

Is my LESS source uploaded?

No. The conversion runs entirely in your browser as JavaScript. Stylesheets — including legacy Bootstrap 3 customisations or proprietary brand themes — never leave your machine. Open DevTools and verify: clicking Run makes zero network requests.