LESS to SCSS Converter
Paste LESS and generate SCSS with converted variables, mixins, nested selectors, media queries, and downloadable .scss output.
Last updated: May 21, 2026
LESS to SCSS conversion runs locally in your browser. Your pasted LESS and generated SCSS 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 SCSS Converter?
A LESS to SCSS Converter rewrites LESS stylesheet source into SCSS syntax. LESS and SCSS share many authoring ideas, including variables, nesting, mixins, and functions, but their source syntax is different. LESS variables start with @, while SCSS variables start with $. LESS uses dotted mixin names such as .button(@color), while SCSS uses @mixin and @include directives. Both formats use braces and semicolons, so the surface change is mostly variable and mixin syntax.
This tool performs a practical source conversion for common LESS snippets and component styles. It converts variables, preserves nested rules and media queries, converts simple LESS mixin definitions and calls into SCSS @mixin and @include syntax, and rewrites @{var} interpolation into #{$var}. 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 SCSS 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 SCSS syntax.
Choose the indentation size used by your project.
Review warnings for LESS-only features that may need manual cleanup.
Copy the generated SCSS or download it as a .scss file.
Common Use Cases
- Migrating legacy LESS component styles into an SCSS codebase
- Converting LESS variables and nested selectors into SCSS syntax
- Rewriting simple LESS mixins as @mixin blocks and @include calls
- Preparing stylesheet snippets before moving from LESS to Sass/SCSS
- Comparing LESS, SCSS, Sass, and CSS versions during a migration
- Cleaning a small LESS file without setting up a local migration script
- Documenting an SCSS 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 SCSS:
@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;
@mixin 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 SCSS with braces and semicolons. Variable references are rewritten from @name to $name, simple mixins are converted to @mixin and @include, and warnings are emitted for LESS-only constructs that need manual review.
Technical Stack
SCSS Brace Syntax
The output is .scss syntax, so braces and semicolons define structure. SCSS is generally easier to migrate from LESS than the indented Sass syntax because both formats use braces.
Source Conversion
This tool rewrites source syntax instead of compiling to CSS. That keeps variables, nesting, and mixin structure available for an SCSS migration.
Manual Review
LESS and SCSS are similar but not identical. Guarded mixins, LESS-specific functions, and :extend() should be reviewed after automated conversion.