Michael Garrigan

How is Sass different from Less?

TLDR:

Sass and Less provide mostly the same functionality. So don't sweat it.

Although CSS has powerful features there has always been a desire to add functionality. This is the role that Sass/Less had provided for the past decade.

The Core of Sass/Less is:

1) A Superset of CSS

2) A preprocessor that compiles to CSS

LESS - version 3.9.0

SASS:

- Dart Sass version - 1.21.0

- LibSass version - 3.6.0

- Ruby Sass - No longer supported

SASS & SCSS

Variables - imperative, default values, block scoped, advanced variable functions.

Interpolation

at-rules

@import extends the CSS at-rule to load styles, mixins, functions, and variables from other stylesheets.

@mixin and @include makes it easy re-use chunks of styles.

@function defines custom functions that can be used in SassScript expressions.

@extend allows selectors to inherit styles from one another.

@at-root puts styles within it at the root of the CSS document.

@error causes compilation to fail with an error message.

@warn prints a warning without stopping compilation entirely.

@debug prints a message for debugging purposes.

Flow control rules like @if, @each, @for, and @while control whether or how many times styles are emitted.

Value Types:

Numbers, strings, colors, list of values, boolean, null, maps/objects/hash, function references.

Operators:

Equality, relational, numeric, string, boolean.

Build-in and user defined functions.

LESS

Variables - variable variables, lazy evaluation, properties as variables, default values.