About the SASS to LESS Converter
Going from indented Sass to LESS means adding punctuation back and changing two sigils. The parser reads your file by indentation level, builds a rule tree, and then prints that tree in braced form. Every $name variable becomes @name, and interpolation written as #{$name} becomes the LESS spelling @{name}, which is the form that works inside selectors and property names.
Mixin shorthands are unwound along the way. The indented syntax lets you define a mixin as =panel($pad: 24px) and call it as +panel(20px), neither of which means anything to LESS. Those become a ruleset named .panel(@pad: 24px) and a call written .panel(20px);, which is how LESS expresses the same idea. An @extend statement is rewritten as the &:extend() form LESS uses.
Some Sass features simply have no LESS translation and are passed through so you can spot them. The !default flag is dropped because LESS has no concept of a variable that only assigns when unset; its lazy evaluation gets you something similar but not identical. Control directives such as @each, @for and @function are copied verbatim and will need rebuilding with LESS recursion and guards. Maps have no counterpart at all. If your goal is plain CSS rather than another preprocessor, SASS to CSS compiles the file directly.
How to use
- Paste the contents of your .sass file into the left pane. Indentation must be consistent for the parser to read the nesting.
- Pick the indent width you want in the LESS output.
- Convert, then look over any @each or @function blocks, which are copied through rather than translated.
- Download the result as a .less file.
Common questions
- What happens to the !default flag?
- It is removed, because LESS has no equivalent. LESS picks the last assignment in a scope, so importing an override after the defaults usually gives the same result.
- Do Sass maps convert to LESS?
- No. LESS has no map type, so a map has to be rebuilt as a set of individual variables or as a detached ruleset with lookup mixins.
- Why did my +mixin call turn into a class?
- That is how LESS mixins work. A mixin is a ruleset with a dotted name, and calling it means writing that name as a statement inside another block.
- Is the indented syntax the same as SCSS?
- It is the same language with different punctuation. Anything expressible in .sass is expressible in .scss, which is why this tool can read either shape of nesting.