Sass vs Less vs SCSS
WHAT IS A CSS PREPROCESSOR?
A CSS preprocessor extends CSS by adding features like variables, mixins, and functions not available in vanilla CSS. These features allow for more maintainable and extendable CSS. Less and Sass are by far the two most popular CSS preprocessors.
SASS
*It should be noted that Sass has two syntactical options: SCSS and Sass. SCSS is closest to the CSS syntax we’re used to with semicolons and brackets aplenty. Sass does away with these and opts for indented syntax, much like Python.
With SASS we have some options that aren’t offered by CSS alone:
- Variables: With SASS, you can save information in variables to be used again later. So it’s possible, for example, to centrally store a color value under a catchier variable.
- Mathematical functions: In SASS, you can also use mathematical operations like +, -, *, /, or %. This allows you to influence size specifications, for example.
- Functions: Other functions also make it easier to work on the design. These allow you to modify color values or analyze lists, among other things.
- Loops: Another advantage of SASS is the ability to set up loops. These are repeated until they reach a status defined by you.
- Case distinctions: These have a similar function to the conditional instructions “if” and “else.” The given commands are only run if specific conditions are met.
- Mixins: Mixins, simply said, are templates. You can either create them yourself or simply integrate them into your own code when using a framework.
- Indentations: The original SASS (as opposed to SCSS) works with indentations and line breaks to structure the code. You don’t need parentheses to display nesting or semicolons to mark line ends.
- Nesting: CSS doesn’t allow you to work with nesting in the code. SASS, though, gives users the option to present dependencies visually to reduce redundancies and simplify the writing process.
- Inheritances: It’s possible to inherit properties from one selector to another. This saves some writing effort and keeps the code slimmer.
- Partial files: To integrate code elements into a SASS file, you can also use partials. These are files that only have to contain a few lines of CSS and are imported into a SASS file by command.
Helpful frameworks and libraries already exist for SASS. Compass or Bourbon do a lot of the work for you when designing a website.
| Advantages | Disadvantages |
|---|---|
| More possibilities | Code has to be compiled |
| Clear code | Difficult troubleshooting |
| Extensive frameworks | Higher learning effort |
| Work with mixins and variables |
LESS
LESS stands for Leaner Style Sheets. It is a backward-compatible language extension for CSS. It allows us to use features like variables, nesting, mixins, etc, all in a CSS-compatible syntax. LESS is influenced by SASS and has influenced the newer “SCSS” syntax of SASS. LESS was used in Bootstrap 3 but was replaced by SASS in Bootstrap 4. This stylesheet language is strongly oriented around CSS and resembles SCSS in its syntax. Both preprocessors share some of the same properties: Both SASS and LESS allow for the use of mixins and variables. One difference, though, is that SASS is based on Ruby, while LESS uses JavaScript. But even this doesn’t give either of the preprocessors an advantage over the others.
Less allows for lazy loading variables, which means that variables don’t need to be declared before being used. Lazy loading isn’t supported in Sass. Sass only searches from the current scope and upwards. Variables outside nested selectors are considered global, as with Less. This behavior can be overwritten with the “!global” declaration for nested variables.
Less defines extends by &:extend, while Sass defines extends by @extend. By default, Sass applies extend to every instance of that particular selector. Less doesn’t apply to every instance unless the word “all” is explicitly stated.
The major difference between the two languages is how they handle mixins. Less mixins can be transformed into functions. Sass separates its functions from its mixins.
Less can return values from its mixins that can be used like a function.
Less also introduces the concept of “mixin guards.” Mixin guards take the place of typical conditional statements. They closely resemble media queries’ syntax. Each condition must have its own mixin. Comparison and logic operators like <, =<, =, >, >=, “and”, “or,” and “not” are supported within the mixin guards.
The mixins can include a default function, which operates like the else in a conditional statement. When no other condition is met, the default function is applied.
Sass’ answer to functions is what they call control directives and expressions. Sass’ documentation is quick to point out that these directives and expressions are often uncommon in day-to-day styling. In fact, these directives and expressions may be more suitable for larger projects, like front-end frameworks.
The real differences are found in the logical functions: LESS gives users the opportunity to only activate mixins when specific situations occur. This is a helpful feature, but it represents the extent of logical links in LESS. SASS, on the other hand, offers loops and case distinctions as known from programming languages.
With SASS, users are free to choose between “indented syntax” or SCSS. Each developer can decide for themselves whether they would like to move away from the CSS rules or stay closer to the original. LESS doesn’t offer this choice. Here, users have to stick with the old rules. Code in LESS is automatically a superset of CSS: All source text formulated in CSS also functions in LESS – just like with SCSS.
For smaller scale projects, Less or Sass would work perfectly. For larger projects, like front-end frameworks, Sass is probably preferable because of its robust functions.
Bibliography: