About LESS to SASS

Convert LESS to SASS syntax. Part of the DevTools Surf developer suite. Browse more tools in the CSS collection.

Use Cases

• Teams preferring indented syntax while migrating from LESS
• Ruby on Rails developers converting LESS stylesheets to Sass
• Projects switching to Sass for integration with Sass's math module
• Developers wanting minimal syntax after using LESS's verbose style

Tips

• Verify that LESS @imports convert to Sass @use or @import
• Check that LESS arithmetic converts to Sass math module functions
• Ensure LESS string interpolation maps to Sass #{} syntax

Fun Facts

• LESS's lazy evaluation means variables can be defined after use, while Sass evaluates variables strictly in order.
• The Sass indented syntax was inspired by Haml and CoffeeScript's philosophy of minimal, whitespace-significant code.
• LESS's JavaScript functions have no direct Sass equivalent, requiring a Dart Sass plugin or manual rewrite.

FAQ

Is SASS indented syntax a good target for LESS code?

Usually SCSS is a better target because LESS code uses braces and semicolons that map directly. Pick SASS only if your team already commits to the indented style.

What changes in indented syntax?

Braces and semicolons go away; indentation defines blocks. Multi-line values need a comma or backslash continuation, which the tool adds.

Will comments still work?

Line comments yes. Block comments need consistent indentation — the converter reflows them.

What if my LESS uses unusual features?

Features like `@plugin` or LESS-specific functions won't have SASS equivalents. The converter marks them as TODO comments in the output.