WebToolsPlanet
CSS Tools

LESS to SCSS Converter

Paste LESS and generate SCSS with converted variables, mixins, nested selectors, media queries, and downloadable .scss output.

FreeNo SignupBrowser BasedCopy SCSS

Last updated: May 21, 2026

LESS to SCSS conversion runs locally in your browser. Your pasted LESS and generated SCSS are not uploaded.

Client-Side Processing
Input Data Stays on Device
Instant Local Execution
Something wrong with this tool? Report it
Runs in your browserSCSS brace outputNo upload required

Related shortcuts

LESS to CSSLESS to SASSCSS to SCSS

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

Buy me a coffee

What is LESS to SCSS Converter?

A LESS to SCSS Converter rewrites LESS stylesheet source into SCSS syntax. LESS and SCSS share many authoring ideas, including variables, nesting, mixins, and functions, but their source syntax is different. LESS variables start with @, while SCSS variables start with $. LESS uses dotted mixin names such as .button(@color), while SCSS uses @mixin and @include directives. Both formats use braces and semicolons, so the surface change is mostly variable and mixin syntax.

This tool performs a practical source conversion for common LESS snippets and component styles. It converts variables, preserves nested rules and media queries, converts simple LESS mixin definitions and calls into SCSS @mixin and @include syntax, and rewrites @{var} interpolation into #{$var}. It also flags LESS-only features that may need manual review, such as guarded mixins, :extend(), inline JavaScript, or LESS-specific functions.

How to Use LESS to SCSS Converter

1

Paste LESS source into the input editor, or load the sample.

2

Keep "Convert variables" enabled to rewrite @brand-color as $brand-color.

3

Keep "Convert mixins" enabled to rewrite LESS mixin definitions and calls into SCSS syntax.

4

Choose the indentation size used by your project.

5

Review warnings for LESS-only features that may need manual cleanup.

6

Copy the generated SCSS or download it as a .scss file.

Common Use Cases

  • Migrating legacy LESS component styles into an SCSS codebase
  • Converting LESS variables and nested selectors into SCSS syntax
  • Rewriting simple LESS mixins as @mixin blocks and @include calls
  • Preparing stylesheet snippets before moving from LESS to Sass/SCSS
  • Comparing LESS, SCSS, Sass, and CSS versions during a migration
  • Cleaning a small LESS file without setting up a local migration script
  • Documenting an SCSS version of a LESS example
  • Finding LESS-only syntax that needs manual review before migration

Example Input and Output

Converting LESS variables, nesting, and a mixin into SCSS:

LESS input
@brand-color: #2563eb;
@card-radius: 14px;

.button-tone(@background: @brand-color) {
  background: @background;
  color: #ffffff;
}

.card {
  border-radius: @card-radius;

  &:hover {
    border-color: @brand-color;
  }
}
SCSS output
$brand-color: #2563eb;
$card-radius: 14px;

@mixin button-tone($background: $brand-color) {
  background: $background;
  color: #ffffff;
}

.card {
  border-radius: $card-radius;
  &:hover {
    border-color: $brand-color;
  }
}

How This Tool Works

The converter strips comments, parses LESS statements and nested blocks, classifies variables, declarations, rules, at-rules, mixin definitions, and mixin calls, then renders SCSS with braces and semicolons. Variable references are rewritten from @name to $name, simple mixins are converted to @mixin and @include, and warnings are emitted for LESS-only constructs that need manual review.

Technical Stack

LESS source parsingSCSS source renderingSCSS variable conversionSCSS @mixin and @include conversionClient-side TypeScriptBrowser Blob download

SCSS Brace Syntax

The output is .scss syntax, so braces and semicolons define structure. SCSS is generally easier to migrate from LESS than the indented Sass syntax because both formats use braces.

Source Conversion

This tool rewrites source syntax instead of compiling to CSS. That keeps variables, nesting, and mixin structure available for an SCSS migration.

Manual Review

LESS and SCSS are similar but not identical. Guarded mixins, LESS-specific functions, and :extend() should be reviewed after automated conversion.

Frequently Asked Questions

Does this output SCSS or indented Sass?

This tool outputs SCSS, the brace-and-semicolon syntax used in .scss files. For indented .sass output, use a LESS to SASS converter instead.

How are LESS variables converted?

When variable conversion is enabled, @brand-color becomes $brand-color, and references such as color: @brand-color become color: $brand-color. LESS interpolation @{name} is rewritten as SCSS interpolation #{$name}.

Can it convert LESS mixins?

Yes for common mixin definitions and calls. A LESS mixin such as .button(@color) becomes @mixin button($color), and .button(@brand) becomes @include button($brand). More advanced guarded or namespaced mixins should be reviewed manually.

Does it compile LESS first?

No. This is a source-to-source converter. It preserves stylesheet structure where possible instead of compiling LESS down to plain CSS.

What LESS features need manual cleanup?

LESS guards, :extend(), inline JavaScript, detached rulesets, and some LESS-only functions do not map cleanly to SCSS. The converter shows warnings when it detects common cases so you can review them.

Is my LESS uploaded?

No. Conversion, copy, and download actions run in your browser. Your LESS and generated SCSS are not sent to a server.

Related Tools

Part of a Collection