LESS to SCSS

Convert LESS code to SCSS by transforming @variable declarations to $variable syntax.

100% Client-Side Local Execution

Upload Data

AutoprefixStrip CommentsSort Props

@font-size: 16px;
@line-height: 1.5;

body {
  font-size: @font-size;
  line-height: @line-height;
}

@font-size: 16px;
@line-height: 1.5;

body {
  font-size: @font-size;
  line-height: @line-height;
}

$font-size: 16px;
$line-height: 1.5;

body {
  font-size: $font-size;
  line-height: $line-height;
}

$font-size: 16px;
$line-height: 1.5;

body {
  font-size: $font-size;
  line-height: $line-height;
}

What is LESS to SCSS?

This LESS to SCSS converter rewrites LESS's @variable-based syntax into SCSS's $variable conventions, supporting teams migrating from LESS to today's more dominant Sass ecosystem. It functions as a less to scss converter for one-time codebase migrations rather than ongoing dual-preprocessor workflows. The tool handles the structural translation between the two preprocessor syntaxes.

Technical Execution

The converter parses LESS-specific syntax — @variables, mixin calls using '.mixinName()', and nested rules — and re-emits equivalent SCSS using '$variables', '@mixin'/'@include' syntax, and SCSS-compatible nesting. Since the two preprocessors differ meaningfully in mixin and variable notation, this is a genuine syntax transformation, not a simple reformat.

Zero Data Storage Guarantee

All conversion happens locally in your browser; your LESS source code is never sent to or stored on a remote server.

How to Use LESS to SCSS (Step-by-Step Guide)

Paste your LESS source code into the converter.
The tool translates it into SCSS syntax.
Review variable and mixin conversions in the output.
Copy the SCSS or download it as a .scss file.
Compile with Dart Sass to verify the migrated styles work as expected.

Frequently Asked Questions (FAQ)

Q: Why migrate from LESS to SCSS?

A: SCSS has become the dominant CSS preprocessor, with a larger ecosystem, more active development, and wider tooling support, making it a common target for teams retiring LESS-based builds.

Q: Do LESS and SCSS variables use different syntax?

A: Yes, LESS uses an '@' prefix for variables while SCSS uses a '$' prefix — the converter remaps these automatically during translation.

Q: Is this migration usually a one-time task?

A: Yes, most teams run this conversion once during a preprocessor migration rather than repeatedly, which keeps overall search demand modest.

Q: Can I convert less to scss online without installing Sass or LESS tools?

A: Yes, the full conversion happens in your browser with no local compiler installation required.

Q: How are LESS mixins translated?

A: LESS's dot-notation mixin calls are converted into SCSS's @mixin definition and @include call syntax.

Q: Will nested media queries convert correctly?

A: Yes, nested @media rules inside selectors are supported by both preprocessors and translate directly.

Q: Does the tool handle LESS's built-in color functions?

A: Common LESS functions are mapped to their SCSS/Sass equivalents where direct equivalents exist; some highly LESS-specific functions may need manual review.

Q: Is the resulting SCSS ready to compile immediately?

A: Yes, the output is valid SCSS that compiles with any standard Sass toolchain without further edits in most cases.

Report an issue with this tool