LESS to SCSS Converter

How the LESS to SCSS converter works

LESS and SCSS look similar but differ in almost every feature: variables, mixins, conditionals and functions all use different syntax and semantics. Translating them one by one is error-prone, so this LESS to SCSS converter takes a reliable route. It compiles your LESS with less.js, which evaluates every variable, mixin and guard, and then re-nests the resulting CSS as SCSS. The output is guaranteed to produce the same styles, with nesting restored so it reads like hand-written SCSS.

Example

.theme(@mode) when (@mode = dark){background:#111;color:#eee}
.theme(@mode) when (@mode = light){background:#fff;color:#222}
.panel{.theme(dark);padding:12px;.panel-title{font-size:18px}}

.panel {
  background: #111;
  color: #eee;
  padding: 12px;
  .panel-title {
    font-size: 18px;
  }
}

The guarded mixins were resolved (only the dark version matched), so the SCSS simply contains the resulting declarations. The nested .panel-title is back inside .panel.

Mapping LESS features to Sass by hand

Because the converter evaluates your code, variables and mixins do not appear in the output. If you want to keep them as reusable Sass code, translate the definitions manually using this table and paste them above the converted rules:

A useful migration strategy is to convert components with this tool, then replace hard-coded colors and sizes in the output with the Sass variables you defined.

Limitations

• Imports of local LESS files cannot be resolved; paste shared variables and mixins into the input first.
• Color functions are evaluated by LESS, so darken(@brand, 10%) arrives as a fixed hex value. LESS and Sass color math can differ slightly, which is another reason the converter uses LESS's own results.
• Compound selectors like .btn.primary and BEM suffix classes stay as separate rules.

Behavior differences to watch in a migration

LESS and Sass evaluate variables differently. LESS variables are lazy: the last definition in a scope wins, even if it appears after the place where the variable is used, which is how LESS themes override defaults. Sass evaluates top to bottom and uses !default for overridable defaults, plus module configuration with @use "theme" with ($brand: red). When you rebuild your variables in SCSS, reproduce overrides with !default rather than by redefining variables later in the file. Scoping differs as well: a LESS variable defined inside a rule is local to it, while in Sass assigning to an existing global variable inside a rule needs !global.

Check the SCSS by compiling it in the SCSS Compiler. To format it to your team's style, use the SCSS Formatter. The conversion runs locally in your browser.