About SASS to LESS

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

Use Cases

• Teams converting Sass files for integration with LESS-based projects
• Developers migrating Ruby project styles to a LESS-based frontend framework
• Projects moving from Sass to LESS for browser-based compilation needs
• Frontend teams aligning with LESS for Bootstrap 3 compatibility

Tips

• Check that Sass indentation converts to LESS's brace-based syntax
• Verify that = mixin definitions become LESS .mixin() patterns
• Ensure + mixin includes convert to LESS .mixin() calls

Fun Facts

• Sass's = and + shorthand for mixins has no equivalent in LESS, requiring expansion to full mixin syntax.
• LESS processes the entire stylesheet before applying rules, while Sass processes line by line, affecting variable scoping.
• Both Sass and LESS were inspired by the desire to add programming-like features to CSS, but took fundamentally different approaches.

FAQ

What's the point of Sass-to-LESS?

Cross-preprocessor portability. Some design systems ship multiple source formats; this tool helps generate or verify the LESS variant from the canonical Sass source.

Do @functions translate?

Basic ones yes — LESS has math functions and the escaping function e(). Complex Sass @functions may need manual rewrite.

Are @each and @for supported?

LESS has mixin recursion instead of explicit loops. The converter rewrites @each/@for into recursive mixin patterns where possible.

Will the output pass LESS's strict mode?

Usually. Sass's looser quoting rules sometimes produce values that LESS rejects — the tool warns about these.