WebToolsPlanet
CSS Tools

LESS to SASS Converter

Paste LESS and generate indented Sass with converted variables, mixins, nested selectors, media queries, and downloadable .sass output.

FreeNo SignupBrowser BasedCopy Sass

Last updated: May 20, 2026

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

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

Related shortcuts

LESS to CSSLESS CompilerCSS to SCSS

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

Buy me a coffee

What is LESS to SASS Converter?

A LESS to SASS Converter rewrites LESS stylesheet source into indented Sass syntax. LESS and Sass share many authoring ideas, including variables, nesting, mixins, and functions, but their source syntax is different. LESS variables start with @, while Sass variables start with $. LESS blocks use braces and semicolons, while indented Sass uses indentation to define structure.

This tool performs a practical source conversion for common LESS snippets and component styles. It converts variables, rewrites nested rules into indentation-based Sass, converts simple LESS mixin definitions and calls into Sass mixins and includes, and preserves at-rules such as media queries. 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 SASS 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 Sass 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 Sass or download it as a .sass file.

Common Use Cases

  • Migrating legacy LESS component styles into an indented Sass codebase
  • Converting LESS variables and nested selectors into Sass syntax
  • Rewriting simple LESS mixins as Sass mixins and include calls
  • Preparing stylesheet snippets before moving from LESS to Sass
  • Comparing LESS, Sass, SCSS, and CSS versions during a migration
  • Cleaning a small LESS file without setting up a local migration script
  • Documenting a Sass 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 indented Sass:

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;
  }
}
Sass output
$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

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 indented Sass. Variable references are rewritten from @name to $name, simple mixins are converted to Sass mixin syntax, and warnings are emitted for LESS-only constructs that need manual review.

Technical Stack

LESS source parsingIndented Sass renderingSass variable conversionSass mixin conversionClient-side TypeScriptBrowser Blob download

Indented Sass Syntax

The output is .sass syntax, so indentation defines nesting. Review indentation before committing converted styles to a project.

Source Conversion

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

Manual Review

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

Frequently Asked Questions

Does this output Sass or SCSS?

This tool outputs indented Sass syntax for .sass files. SCSS is the brace-based Sass syntax; use a LESS to SCSS converter when you want SCSS output.

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.

Can it convert LESS mixins?

Yes for common mixin definitions and calls. A LESS mixin such as .button(@color) becomes =button($color), and .button(@brand) becomes +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 Sass. The converter shows warnings when it detects common cases.

Is my LESS uploaded?

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

Related Tools

Part of a Collection