LESS to SASS Converter
Paste LESS and generate indented Sass with converted variables, mixins, nested selectors, media queries, and downloadable .sass output.
Last updated: May 20, 2026
LESS to SASS conversion runs locally in your browser. Your pasted LESS and generated Sass are not uploaded.
Need a specific QR type?
Find this tool useful? Support the project to keep it free!
Buy me a coffeeWhat 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
Paste LESS source into the input editor, or load the sample.
Keep "Convert variables" enabled to rewrite @brand-color as $brand-color.
Keep "Convert mixins" enabled to rewrite LESS mixin definitions and calls into Sass syntax.
Choose the indentation size used by your project.
Review warnings for LESS-only features that may need manual cleanup.
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:
@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;
}
}$brand-color: #2563eb
$card-radius: 14px
=button-tone($background: $brand-color)
background: $background
color: #ffffff
.card
border-radius: $card-radius
&:hover
border-color: $brand-colorHow 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
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.