What's the difference between Sass, SCSS and LESS?

Sass is a CSS preprocessor, and SCSS is one of its two syntaxes. The other one, the original indented syntax, uses the .sass extension. LESS is a different preprocessor with similar features and its own syntax. All three compile to plain CSS before the browser sees it.

Here is the same code in each of them: a variable, nesting and a mixin with a parameter.

SCSS (.scss):

$brand: #4f46e5;

@mixin rounded($radius: 8px) {
  border-radius: $radius;
}

.card {
  @include rounded(12px);
  border: 1px solid $brand;

  .title {
    color: $brand;
  }
}

Sass, indented syntax (.sass):

$brand: #4f46e5

=rounded($radius: 8px)
  border-radius: $radius

.card
  +rounded(12px)
  border: 1px solid $brand

  .title
    color: $brand

LESS (.less):

@brand: #4f46e5;

.rounded(@radius: 8px) {
  border-radius: @radius;
}

.card {
  .rounded(12px);
  border: 1px solid @brand;

  .title {
    color: @brand;
  }
}

All three compile to the same CSS:

.card {
  border-radius: 12px;
  border: 1px solid #4f46e5;
}
.card .title {
  color: #4f46e5;
}

Sass: two syntaxes, one tool

The indented syntax came first. It has no braces and no semicolons, and nesting is defined by indentation, like in Python. = defines a mixin and + includes it, although @mixin and @include work there too.

SCSS ("Sassy CSS") was added later and is what almost everyone uses today. It's a superset of CSS, so any valid CSS file is also a valid SCSS file. You can rename styles.css to styles.scss and start adding variables where you need them. Both syntaxes support exactly the same features, and you can even mix .sass and .scss files in one project.

LESS

LESS is a separate project, written in JavaScript. The syntax looks close to SCSS, with a few differences:

• Variables start with @ instead of $, which can be confusing next to CSS at-rules like @media.
• Mixins are just classes. Any class can be included in another rule by writing its name, like .rounded();. Add parentheses to the definition, as in .rounded(), and it's only a mixin and doesn't appear in the CSS output.
• Logic like loops and conditions exists, but it's more awkward than in Sass.

Sass today

If you use Sass, use Dart Sass, the sass package on npm. It's the maintained implementation. LibSass and the node-sass package built on it are deprecated, so if an old project still has node-sass in package.json, replace it with sass.

Sass has also deprecated @import and plans to remove it. Use @use instead, which loads a file once and puts its members behind a namespace:

// _tokens.scss
$brand: #4f46e5;
$radius: 12px;

// card.scss
@use 'tokens';

.card {
  border: 1px solid tokens.$brand;
  border-radius: tokens.$radius;
}

Do you still need a preprocessor?

Often not. Native CSS now covers the features most people installed Sass for:

:root {
  --brand: #4f46e5;
}

.card {
  border: 1px solid var(--brand);
  border-radius: 12px;

  .title {
    color: var(--brand);
  }

  &:hover {
    border-color: color-mix(in oklch, var(--brand), black 20%);
  }
}

• Custom properties replace most variables. Unlike Sass variables, which disappear at compile time, they exist in the browser, so you can change them in a media query, for a dark theme, or from JavaScript.
• Nesting is supported natively in all major browsers. Check Can I Use if you support older ones.
• color-mix() replaces color functions like darken() and lighten().
• @layer decides which group of styles wins, without the file order and specificity tricks large stylesheets used to need.

Sass is still handy for things CSS can't do yet: mixins that output whole blocks of declarations, loops that generate utility classes, functions, and maps. For example, this generates three margin utilities:

$sizes: (sm: 0.5rem, md: 1rem, lg: 2rem);

@each $name, $size in $sizes {
  .mt-#{$name} {
    margin-top: $size;
  }
}

Which one to use

Start with plain CSS. It's enough for most projects now, and it's one less dependency to keep up to date. If you find yourself wanting mixins or loops, add SCSS, which is still the most common choice and supported by tools like Vite and Next.js once you install sass.

Choose LESS only when a project already uses it. You'll mostly meet it in legacy codebases, such as projects built on Bootstrap 3 or Ant Design before version 5, which both used LESS for their styles.