SCSS to LESS Converter

Paste SCSS code and get LESS output — variables, mixins, and includes converted to LESS equivalents.

Last updated: May 21, 2026

SCSS Input

LESS Output

@primary: #0f766e;
@spacing: 1rem;

.flex-center() {
  display: flex;
  align-items: center;
  justify-content: center;
}

.card {
  background: white;
  padding: @spacing;

  &:hover {
    background: lighten(@primary, 40%);
  }

  .title {
    color: @primary;
    font-size: 1.25rem;
  }
}

.hero {
  .flex-center();
  min-height: 100vh;
}

Converts SCSS syntax to LESS. Maps $var → @var, @mixin/@include → .mixin() syntax. Complex SCSS features may need manual adjustment.

Client-Side Processing

Input Data Stays on Device

Instant Local Execution

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

Buy me a coffee

What is SCSS to LESS Converter?

SCSS and LESS are both CSS preprocessors but use different syntax for variables and mixins. SCSS uses `$variable` notation and the `@mixin`/`@include` keywords, while LESS uses `@variable` and parametric mixins defined as `.name() {}` and called as `.name()`.

This converter handles the most common syntactic differences: variable declarations, mixin definitions, mixin includes, and extend rules. Both preprocessors support nesting with the same syntax, so nested selectors pass through unchanged.

How to Use SCSS to LESS Converter

Paste SCSS code into the input panel (or click Load Sample)

The LESS output appears instantly in the right panel

Copy or download the converted .less file

Review complex features like @use/@forward that have no direct LESS equivalent

Common Use Cases

Developers migrating a project from SCSS to LESS.
Teams integrating SCSS components into a LESS-based codebase.
Developers comparing equivalent syntax between the two preprocessors.

Example Input and Output

Convert SCSS variables and mixin to LESS equivalents.

SCSS input

$primary: #0f766e;
@mixin flex-center() {
  display: flex;
}

LESS output

@primary: #0f766e;
.flex-center() {
  display: flex;
}

Privacy

All conversion happens in your browser. No code is sent to any server.

Frequently Asked Questions

Are SCSS and LESS interchangeable?

They solve the same problems (variables, nesting, mixins) but have different syntax. Some advanced SCSS features (@use, @forward, modules, loops, conditionals) have no direct LESS equivalent and will need manual rework after conversion.

Related Tools

SCSS to SASS Converter

Convert SCSS brace syntax to SASS indented syntax. Removes braces and semicolons, converts @mixin/@include to = and + shorthand.

SCSS to Stylus Converter

Convert SCSS code to Stylus indented syntax. Removes braces and semicolons, converts $variables to bare assignments, @mixin/@include to function syntax.

LESS to Stylus Converter

Convert LESS code to Stylus indented syntax. Removes braces and semicolons, converts @variable to bare variable assignments.

SASS to SCSS Converter

Convert SASS indented syntax to SCSS brace syntax. Adds curly braces and semicolons, converts = and + shorthand to @mixin and @include.

SCSS Beautifier

Format and beautify SCSS stylesheets online. Fixes indentation, normalizes spacing, and handles nested rules, $variables, @mixins, and @include directives.

Base64 Encoder/Decoder

Encode text to Base64 or decode Base64 to plain text — with URL-safe mode, auto-detect, and size stats.