LESS to SASS Converter

How to use the LESS to SASS Converter

Paste your LESS code into the Input editor, or use Sample, Upload file or Load URL.

Press Convert. The LESS is compiled first, then written out as indented Sass.

Check the status bar for errors such as an undefined variable, which are reported with a line number.

Use Copy or Download above the output panel to take the indented Sass output with you.

What the LESS to SASS converter produces

This LESS to SASS converter targets Sass's indented syntax, the brace-free format used in .sass files. Your LESS is compiled with the official less.js compiler, so variables, operations, mixins and color functions are evaluated. The CSS result is then re-nested by parent selector and printed with 2-space indentation, property: value lines and no semicolons. If you want braces instead, use LESS to SCSS.

Example

@brand:#0f766e;@gap:8px;
.card{padding:(@gap*2);border:1px solid @brand;.title{font-weight:600}&:hover{border-color:darken(@brand,10%)}@media (min-width:768px){padding:(@gap*3)}}

.card
  padding: 16px
  border: 1px solid #0f766e
  .title
    font-weight: 600
  &:hover
    border-color: #094944

@media (min-width: 768px)
  .card
    padding: 24px

(@gap*2) became 16px and darken() produced #094944. The media query that was nested inside .card in LESS was bubbled to the top level during compilation, so in the Sass output it wraps its own .card block. Sass also supports media queries nested inside selectors; move it back inside .card if you prefer that layout.

Rebuilding LESS features in indented Sass

LESS	Indented Sass
`@gap: 8px;`	`$gap: 8px`
`.shadow() { box-shadow: ... }`	`=shadow` then an indented `box-shadow: ...`
`.shadow();`	`+shadow`
`@{prefix}-item`	`#{$prefix}-item`
`e("...")` / `~"..."`	`unquote("...")` or plain value

Since the converter outputs values instead of variables, add these definitions yourself where values repeat.

Checks after converting

Indentation is significant in .sass files. Keep the 2-space structure if you edit the output.
Multi-line comments are joined onto one line, as required by the indented syntax.
Local @import files cannot be read; include their content in the input.
Compile the result with the SASS Compiler to confirm it matches the original CSS.

SCSS or indented Sass as the target?

Pick the indented syntax if your team prefers minimal punctuation or already writes indentation-based templates such as Pug or Haml. Pick SCSS if you want to paste CSS snippets directly, or rely on formatters and linters: Prettier and most Stylelint setups support SCSS, but Prettier does not format indented .sass files. Both compile with Dart Sass to identical CSS.

Colors deserve a second look after any LESS migration. LESS and Sass implement functions such as darken() slightly differently, so recomputing a color in Sass can give a marginally different value. Because this converter keeps the value that LESS computed, the page looks exactly as before; if you later replace the literal with a Sass function call, compare the resulting hex codes.

The conversion runs in your browser and nothing is uploaded.

Frequently asked questions

What is the difference between converting LESS to SASS and to SCSS?

Both produce the same nesting and values. SCSS output uses braces and semicolons; SASS output uses indentation only.

Are my LESS mixins converted to =mixin definitions?

No. Mixins are expanded during compilation, so their declarations appear where they were called. Recreate reusable mixins manually with = and +.

Why did my media query move out of the rule?

less.js bubbles nested media queries to the top level when compiling. Sass allows nesting them again, so you can move the block back inside the selector.

Can I convert the .sass output back to CSS?

Yes. Use the SASS Compiler or SASS to CSS converter.

Why are my LESS guards and loops gone from the output?

The LESS is compiled before it is converted, so when guards and recursive mixin loops are evaluated and only the rules they generate remain. If you want the logic back in Sass, rewrite it with @if, @each or @for, which are much easier to read than LESS recursion.

What happens to LESS :extend?

less.js resolves &:extend(.btn) by adding your selector to the selector list of the .btn rule, so the output shows combined selectors such as .btn, .btn-primary. You can keep it that way, or replace the pattern with Sass @extend .btn in the indented file.