Why migrate from LESS to SCSS?

SCSS has broader tooling, more active maintenance, and better module support (@use, @forward). Most teams picking a preprocessor today go SCSS.

What's the variable syntax change?

LESS uses @color, SCSS uses $color. The converter rewrites every variable declaration and reference.

LESS's `.mixin()` becomes SCSS's `@mixin mixin` + `@include mixin`. Default values and variadics carry over.

SCSS uses @if inside @mixin; LESS uses `when` after the mixin signature. The tool rewrites guards into @if blocks.

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

The migration from LESS to SCSS became widespread after Bootstrap 4 switched from LESS to SCSS in 2018.
LESS uses @ for variables and SCSS uses $, because @ in SCSS is reserved for at-rules like @media and @import.
Both LESS and SCSS compile to identical CSS output, so migration is purely a developer experience change.

Why migrate from LESS to SCSS?: SCSS has broader tooling, more active maintenance, and better module support (@use, @forward). Most teams picking a preprocessor today go SCSS.
What's the variable syntax change?: LESS uses @color, SCSS uses $color. The converter rewrites every variable declaration and reference.
Do mixins translate?: LESS's `.mixin()` becomes SCSS's `@mixin mixin` + `@include mixin`. Default values and variadics carry over.
Are LESS guards supported in SCSS?: SCSS uses @if inside @mixin; LESS uses `when` after the mixin signature. The tool rewrites guards into @if blocks.

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

The migration from LESS to SCSS became widespread after Bootstrap 4 switched from LESS to SCSS in 2018.
LESS uses @ for variables and SCSS uses $, because @ in SCSS is reserved for at-rules like @media and @import.
Both LESS and SCSS compile to identical CSS output, so migration is purely a developer experience change.

Why migrate from LESS to SCSS?: SCSS has broader tooling, more active maintenance, and better module support (@use, @forward). Most teams picking a preprocessor today go SCSS.
What's the variable syntax change?: LESS uses @color, SCSS uses $color. The converter rewrites every variable declaration and reference.
Do mixins translate?: LESS's `.mixin()` becomes SCSS's `@mixin mixin` + `@include mixin`. Default values and variadics carry over.
Are LESS guards supported in SCSS?: SCSS uses @if inside @mixin; LESS uses `when` after the mixin signature. The tool rewrites guards into @if blocks.