LESS to SCSS Converter
Convert LESS stylesheets to SCSS instantly. Transforms @variable syntax to $variable — keeping your nesting and structure intact.
LESS Input
SCSS Output
Example
Here's a quick before-and-after to show exactly what gets converted. LESS variables use @ as their prefix, while SCSS variables use $. That's the main difference — nesting and structure stay the same.
LESS with @variables → SCSS with $variables
LESS input
SCSS output
Click Sample to load this example directly into the editor and see it convert live.
What Is a LESS to SCSS Converter?
This tool converts LESS stylesheets into SCSS — the most widely used CSS preprocessor syntax today. The core conversion is straightforward: LESS uses @variable syntax, SCSS uses $variable. Everything else — nesting, & selectors, darken(), lighten(), arithmetic — works the same way in both preprocessors.
SCSS is a superset of CSS, meaning any valid CSS is also valid SCSS. According to the MDN Web Docs, CSS preprocessors help manage complex stylesheets by adding features like variables, nesting, and mixins. If your team is moving to a build pipeline that uses Dart Sass (the current recommended implementation), converting your LESS to SCSS is the natural migration path.
How to Use
Paste your LESS code
Paste your LESS stylesheet into the left editor, or click Upload to load a .less file directly from your computer.
Conversion happens automatically
The converter runs as you type. It replaces every @variable declaration and usage with $variable, while leaving at-rules like @media and @keyframes untouched.
Copy or download the SCSS
Hit Copy to grab the result to your clipboard, or Download to save it as a .scss file ready to drop into your project.
When Is This Useful?
The most common scenario is migrating a legacy LESS codebase to SCSS. Many teams started with LESS years ago when it was the go-to preprocessor, but the ecosystem has largely moved to SCSS/Sass. Frameworks like Bootstrap 5 dropped LESS in favor of SCSS, so if you're upgrading Bootstrap, you'll need this conversion.
It's also useful when joining a team that uses SCSS after working on a LESS project, or when consolidating multiple stylesheets across different preprocessors into one consistent codebase. The converter handles the mechanical part of the rename so you can focus on reviewing the logic rather than doing find-and-replace by hand. For more on LESS–SCSS differences, CSS-Tricks has a good comparison.
FAQ
What's the main difference between LESS and SCSS?
The biggest syntactic difference is variable prefix: LESS uses @ while SCSS uses $. Both support nesting, mixins, functions, and partials. LESS runs natively in the browser via a JavaScript runtime; SCSS is compiled server-side or in a build step. In practice, most modern toolchains use SCSS because Dart Sass is actively maintained and fast.
Will this converter handle @media and @keyframes correctly?
Yes. The converter is careful to only replace @ prefixes on identifiers that look like variable names — not CSS at-rules. So @media (max-width: 768px), @keyframes spin, @import, and @font-face are all left exactly as-is.
Do LESS mixins convert to SCSS mixins automatically?
Not with this tool. LESS mixins use a different syntax (.mixin()) compared to SCSS (@mixin / @include). This converter focuses on the variable prefix migration, which is the most common mechanical conversion. Mixin rewrites require understanding the logic, so those need manual review. The SCSS mixin docs are a good reference when you get there.
Why is SCSS more popular than LESS today?
A few reasons: SCSS is a superset of CSS (any valid CSS works in SCSS without changes), Dart Sass is fast and actively developed, and major frameworks like Bootstrap and Angular Material ship SCSS. LESS's browser-based compilation was once an advantage, but modern build tools make server-side compilation a non-issue. See the CSS-Tricks Sass vs LESS comparison for a balanced overview.
Can I use the converted SCSS file immediately?
For most stylesheets, yes. Paste the output into your project and compile with Dart Sass. You should still review for LESS-specific features that don't have a direct SCSS equivalent, like .mixin() calls and LESS's each() loop syntax. But straightforward stylesheets that just use variables and nesting will work right away.
What about LESS color functions like darken() and lighten()?
They're kept as-is, because SCSS has the same darken() and lighten() functions. Note that in recent versions of Dart Sass these are deprecated in favor of the color module (color.adjust()), but they still compile. The converter leaves them untouched so your code works immediately.
Related Tools
Need to go the other way or work with a different format? Check the tools above — they cover the most common CSS preprocessor conversions.