SCSS to LESS Converter
Paste SCSS code and get LESS output — variables, mixins, and includes converted to LESS equivalents.
Last updated: May 21, 2026
Find this tool useful? Support the project to keep it free!
Buy me a coffeeWhat 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.
$primary: #0f766e;
@mixin flex-center() {
display: flex;
}@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.
SASS to LESS Converter
Convert indented SASS syntax to LESS. Adds braces, maps $variables to @variables, and rewrites =mixin/+include shorthand to LESS .mixin() syntax.