About the LESS to SASS Converter
LESS and Sass agree on nesting and disagree on almost every symbol. The biggest change this converter makes is the variable sigil: LESS marks variables with @, which is the same character CSS uses for at-rules, so @brand: #f25f1e becomes $brand: #f25f1e and every reference in a value follows it. Real at-rules such as @media and @import are recognised by name and left alone rather than being mangled into variables.
Mixins need more than a symbol swap. In LESS a mixin is an ordinary ruleset with a parameter list, and you call it by writing its selector as a statement. Sass separates the two ideas, so .panel(@pad: 24px) is emitted as a mixin definition and .panel(20px) becomes an include. In the indented syntax those get the shorthand spellings =panel and +panel, which is what most .sass files in the wild use. Semicolon separated LESS arguments are rewritten with commas.
A few LESS features have no direct counterpart and are copied through untouched, so you should read the output before committing it. Guard clauses written with when, detached rulesets and the !important mixin modifier all need a manual rewrite into @if or a Sass argument. Escaped values written as ~"..." become unquote("..."), which is the Sass equivalent. If you would rather keep braces, LESS to SCSS produces the braced dialect from the same input.
How to use
- Paste your LESS into the left pane or upload a .less file.
- Choose the indent width. Indented Sass is whitespace significant, so the file has to be consistent.
- Copy the result or download it with a .sass extension, then compile it to check nothing was lost.
Common questions
- Are LESS guards converted to Sass conditionals?
- No. A mixin guard written with when is copied through as written and needs rewriting as an @if block, because the two languages evaluate conditions differently.
- What happens to LESS operations such as @a + @b?
- The expression is kept with the variables renamed. Sass and LESS both support arithmetic, though Sass is stricter about mixing units, so check any division.
- Why is my mixin call missing its semicolons?
- LESS allows semicolons between mixin arguments so a single argument can contain commas. Sass only uses commas, so the separators are converted for you.
- Should I pick .sass or .scss for a migration?
- SCSS is closer to the LESS you already have, so the diff is smaller and reviewers can follow it. Choose indented Sass only if the team already prefers that style.