SCSS to LESS Converter

Convert SCSS to LESS online — variables, mixins, and nesting translated instantly. Free, no install needed.

SCSS Input

LESS Output

Example

Here's a real before-and-after so you can see exactly what the converter does to your SCSS.

SCSS Variables and Mixins → LESS

SCSS input

Input

Converted LESS output

Output

Click Sample in the toolbar to load this example directly into the editor and try it yourself.

What Is an SCSS to LESS Converter?

Both SCSS and LESS are CSS preprocessors — they let you write cleaner, more maintainable stylesheets using variables, nesting, and mixins. The difference is mostly syntax. SCSS uses $variable and @mixin/@include; LESS uses @variable and .mixin() calls. This converter handles those translations automatically.

You'd typically need this when migrating an older codebase that used LESS (Bootstrap 3 was built on LESS) to a project that expects SCSS, or vice versa. It also helps when mixing component libraries that come in different preprocessor flavors. The MDN CSS docs are a handy reference when you're unsure which plain CSS features you can lean on instead.

How to Use

1

Paste or upload your SCSS

Drop your SCSS source into the left editor, or click Upload to load a .scss file from disk. You can also click Sample to try a built-in example.

2

Conversion happens live

The tool converts as you type — no button to press. Every $var becomes @var, every @mixin becomes a .mixin() definition, and every @include becomes a .mixin() call. Nesting and structure stay intact.

3

Copy or download the LESS output

Click Copy to send the result to your clipboard, or Download to save it as converted.less. Drop it straight into your LESS-based project.

When Does This Actually Help?

The most common scenario: you're integrating a third-party SCSS component into a project that still uses LESS — or you're migrating a legacy LESS codebase to modern SCSS. Either way, hand-converting dozens of files is tedious. Tools like CSS-Tricks's comparison of Sass vs LESS show just how similar the two preprocessors are, which makes automated conversion practical.

Keep in mind that this tool handles the syntax differences — variables, mixins, and @include calls — but more advanced SCSS features like @use, @forward, or @extend don't have direct LESS equivalents. You'll want to review those manually after conversion. The official Sass at-rules docs are the best place to check what each rule does.

FAQ

What's the main syntax difference between SCSS and LESS variables?

SCSS uses a dollar sign prefix: $primary: #333;. LESS uses an at-sign prefix: @primary: #333;. Both work the same way — they're just strings you define once and reference throughout your stylesheet. The converter swaps every $ for @ automatically.

How does mixin syntax differ between SCSS and LESS?

In SCSS you define a mixin with @mixin name() { ... } and call it with @include name();. In LESS, a mixin is just a class with parentheses: .name() { ... }, and you call it the same way: .name();. This converter turns @mixin into .mixin() and @include into the corresponding .mixin() call.

Why did Bootstrap switch from LESS to SCSS?

Bootstrap 4 switched from LESS to SCSS because the Sass ecosystem had grown significantly larger and its tooling — especially with node-sass and later dart-sass — became the de-facto standard in most build pipelines. LESS had fewer active contributors and slower development momentum at the time.

Does nesting work the same way in both preprocessors?

Yes — nesting syntax is identical in SCSS and LESS. You write .parent { .child { } } in both. This converter preserves all nesting as-is. Native CSS nesting is also now supported in modern browsers, so in many cases you might not need a preprocessor at all.

Will this handle @use and @forward from modern Sass?

No — @use and @forward are Sass-specific module system features introduced in Sass modules and have no equivalent in LESS. The converter focuses on the common subset: variables, mixins, and @include. Anything using the Sass module system will need manual refactoring.

Is this conversion lossless?

For straightforward SCSS that uses variables, nesting, and basic mixins, yes — the conversion is faithful. If your SCSS uses advanced features like @extend, %placeholders, @use/@forward, or Sass built-in functions, those won't convert cleanly and you'll need to handle them manually.

Related Tools

SCSS to CSS LESS to SCSS LESS to CSS CSS to SCSS CSS to LESS CSS Formatter SCSS to Sass

Need to go the other direction? Try LESS to SCSS, or use the CSS Formatter to clean up your output.