CSS Preprocessors: Exploring SASS and LESS

Table of Contents

1. What Are CSS Preprocessors?
2. SASS: A Deep Dive
   • 2.1 History and Syntax
   • 2.2 Key Features of SASS
   • 2.3 Advanced SASS Concepts
3. LESS: A Deep Dive
   • 3.1 History and Syntax
   • 3.2 Key Features of LESS
   • 3.3 Advanced LESS Concepts
4. SASS vs. LESS: A Detailed Comparison
5. How to Choose Between SASS and LESS
6. Getting Started with SASS
7. Getting Started with LESS
8. Conclusion
9. References

What Are CSS Preprocessors?

A CSS preprocessor is a scripting language that extends the capabilities of vanilla CSS by adding features like variables, nesting, mixins, and functions. These features make stylesheets more modular, reusable, and maintainable. Preprocessors don’t replace CSS—instead, they compile (translate) their own syntax into standard CSS that browsers can understand.

Why Use a Preprocessor?

Vanilla CSS has limitations:

• No built-in variables for reusing values (e.g., colors, spacing).
• Repetitive code (e.g., writing the same media query or font stack across files).
• Lack of organization (large projects become hard to navigate).

Preprocessors solve these issues by introducing programming constructs, allowing developers to write DRY (Don’t Repeat Yourself) code and streamline workflows.

SASS: A Deep Dive

History and Syntax of SASS

SASS (originally Syntactically Awesome Style Sheets) was created in 2006 by Hampton Catlin and later maintained by Natalie Weizenbaum and Chris Eppstein. Initially written in Ruby, it has since been rewritten in Dart (Dart Sass), which is now the official and fastest implementation.

SASS offers two syntaxes:

1. SCSS (Sassy CSS): The most popular syntax, which uses curly braces {} and semicolons ; like standard CSS. Files use the .scss extension.
2. Sass (Indented Syntax): A more concise syntax that uses indentation instead of braces and omits semicolons. Files use the .sass extension.

Most developers prefer SCSS due to its familiarity with CSS, so we’ll focus on SCSS in examples.

Key Features of SASS

1. Variables

Variables store reusable values (e.g., colors, fonts, spacing) for consistent styling. In SCSS, variables are defined with $.

// Define variables  
$primary-color: #2c3e50;  
$font-stack: 'Helvetica', sans-serif;  
$spacing: 16px;  

// Use variables  
body {  
  color: $primary-color;  
  font-family: $font-stack;  
  padding: $spacing;  
}  

Compiled CSS:

body {  
  color: #2c3e50;  
  font-family: 'Helvetica', sans-serif;  
  padding: 16px;  
}  

2. Nesting

Nesting allows you to write CSS selectors in a hierarchical structure, mirroring HTML. This reduces repetition and improves readability.

nav {  
  ul {  
    margin: 0;  
    padding: 0;  
    list-style: none;  

    li {  
      display: inline-block;  

      a {  
        color: $primary-color;  
        text-decoration: none;  

        &:hover {  // & refers to the parent selector (a)  
          text-decoration: underline;  
        }  
      }  
    }  
  }  
}  

Compiled CSS:

nav ul {  
  margin: 0;  
  padding: 0;  
  list-style: none;  
}  
nav ul li {  
  display: inline-block;  
}  
nav ul li a {  
  color: #2c3e50;  
  text-decoration: none;  
}  
nav ul li a:hover {  
  text-decoration: underline;  
}  

3. Partials and Imports

Partials are small, modular SCSS files (named with a leading underscore, e.g., _variables.scss) that are imported into other files. They help organize code into components (e.g., _buttons.scss, _forms.scss).

Use @use (modern) or @import (legacy) to include partials. @use is preferred as it avoids namespace collisions.

// _variables.scss  
$primary-color: #2c3e50;  

// styles.scss  
@use 'variables';  // Imports _variables.scss  

body {  
  color: variables.$primary-color;  // Access variable with namespace  
}  

4. Mixins

Mixins are reusable blocks of CSS that can accept arguments (like functions). Use @mixin to define them and @include to use them.

// Define a mixin for flexbox centering  
@mixin flex-center {  
  display: flex;  
  justify-content: center;  
  align-items: center;  
}  

// Use the mixin  
.container {  
  @include flex-center;  
  height: 100vh;  
}  

Compiled CSS:

.container {  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  height: 100vh;  
}  

Mixins can also take arguments:

@mixin button($bg-color, $text-color) {  
  background-color: $bg-color;  
  color: $text-color;  
  padding: 8px 16px;  
  border: none;  
  border-radius: 4px;  
}  

.primary-btn {  
  @include button(#3498db, white);  
}  

5. Extend/Inheritance

@extend reuses styles from one selector in another, reducing code duplication. It’s useful for sharing base styles (e.g., button variants).

%btn-base {  // Placeholder selector (won't compile to CSS alone)  
  padding: 8px 16px;  
  border: none;  
  border-radius: 4px;  
}  

.primary-btn {  
  @extend %btn-base;  
  background-color: #3498db;  
}  

.secondary-btn {  
  @extend %btn-base;  
  background-color: #2ecc71;  
}  

Compiled CSS:

.primary-btn, .secondary-btn {  
  padding: 8px 16px;  
  border: none;  
  border-radius: 4px;  
}  
.primary-btn {  
  background-color: #3498db;  
}  
.secondary-btn {  
  background-color: #2ecc71;  
}  

6. Functions

SASS includes built-in functions for colors (e.g., lighten(), darken()), math, and more. You can also write custom functions with @function.

// Built-in color function  
$primary: #3498db;  
$primary-light: lighten($primary, 10%);  // #5dade2  

// Custom function to calculate spacing  
@function spacing($multiplier) {  
  @return 8px * $multiplier;  
}  

.container {  
  padding: spacing(2);  // 16px  
}  

Advanced SASS Concepts

• Control Directives: Use @if, @else, @for, @each, and @while for logic and loops.

  @for $i from 1 through 3 {  
    .col-#{$i} { width: 100% / 3 * $i; }  
  }  

• Maps: Store key-value pairs for organized data (e.g., theme colors).

  $theme-colors: (  
    primary: #3498db,  
    secondary: #2ecc71  
  );  
  .btn-primary { color: map-get($theme-colors, primary); }  

LESS: A Deep Dive

History and Syntax of LESS

LESS (Leaner Style Sheets) was created in 2009 by Alexis Sellier (also known as “cloudhead”) as a JavaScript-based alternative to SASS. Inspired by SASS, LESS aims to be more lightweight and integrate seamlessly with JavaScript tools.

LESS syntax is nearly identical to CSS, making it easy for beginners to adopt. It uses .less file extensions and @ for variables.

Key Features of LESS

1. Variables

LESS variables are defined with @ and are scoped to the block they’re declared in (unlike SASS, which has global variables by default).

// Define variables  
@primary-color: #2c3e50;  
@font-stack: 'Helvetica', sans-serif;  
@spacing: 16px;  

// Use variables  
body {  
  color: @primary-color;  
  font-family: @font-stack;  
  padding: @spacing;  
}  

2. Nesting

Nesting in LESS works similarly to SASS, with the & operator for parent selectors.

nav {  
  ul {  
    margin: 0;  
    padding: 0;  

    li {  
      display: inline-block;  

      a {  
        color: @primary-color;  
        &:hover { text-decoration: underline; }  
      }  
    }  
  }  
}  

3. Mixins

LESS mixins are defined like CSS classes (.mixin-name) and can be included without @include. Parametric mixins use @arguments.

// Simple mixin  
.flex-center {  
  display: flex;  
  justify-content: center;  
  align-items: center;  
}  

.container {  
  .flex-center;  // Include mixin  
  height: 100vh;  
}  

// Parametric mixin  
.button(@bg-color, @text-color) {  
  background-color: @bg-color;  
  color: @text-color;  
  padding: 8px 16px;  
}  

.primary-btn {  
  .button(#3498db, white);  
}  

4. Extend

LESS uses :extend() to inherit styles, similar to SASS’s @extend.

.btn-base {  
  padding: 8px 16px;  
  border-radius: 4px;  
}  

.primary-btn:extend(.btn-base) {  
  background-color: #3498db;  
}  

5. Operations

LESS supports math operations directly in styles, making it easy to calculate values.

@base-font-size: 16px;  
h1 { font-size: @base-font-size * 2; }  // 32px  

6. Guards

Guards are LESS’s way of handling conditional logic, using when for mixins.

.mixin(@size) when (@size = small) {  
  font-size: 12px;  
}  
.mixin(@size) when (@size = large) {  
  font-size: 20px;  
}  

.text { .mixin(large); }  // font-size: 20px  

Advanced LESS Concepts

• Plugins: Extend LESS with plugins like less-plugin-autoprefix for vendor prefixes.
• Lazy Loading: Variables are evaluated when used, not when declared, allowing forward references.

SASS vs. LESS: A Detailed Comparison

How to Choose Between SASS and LESS

• Project Requirements: If you need advanced features (e.g., maps, control directives), SASS is better. For simplicity, LESS may suffice.
• Team Familiarity: If your team knows JavaScript, LESS (JS-based) may integrate more smoothly. If they prefer Ruby or Dart, SASS.
• Ecosystem: SASS has more tools (e.g., Webpack loaders, frameworks like Bootstrap 4+ use SCSS).
• Performance: Dart Sass is faster than Less.js for large projects.

Getting Started with SASS

Installation

1. Install via npm:

   npm install -g sass  # Global installation  

Basic Workflow

1. Create a .scss file (e.g., styles.scss).
2. Write SCSS code:

   $primary: #3498db;  
   body { background: $primary; }  

3. Compile to CSS:

   sass styles.scss styles.css  # One-time compile  
   sass --watch styles.scss:styles.css  # Auto-compile on changes  

Getting Started with LESS

Installation

1. Install via npm:

   npm install -g less  # Global installation  

Basic Workflow

1. Create a .less file (e.g., styles.less).
2. Write LESS code:

   @primary: #3498db;  
   body { background: @primary; }  

3. Compile to CSS:

   lessc styles.less styles.css  # One-time compile  

Conclusion

CSS preprocessors like SASS and LESS transform how we write styles by adding modularity, reusability, and logic. SASS offers richer features and a larger ecosystem, making it ideal for complex projects. LESS, with its CSS-like syntax and JavaScript integration, is great for simplicity.

Ultimately, both tools solve the same core problem: making CSS maintainable. Choose based on your project’s needs, team expertise, and existing toolchain.

References

• SASS Official Documentation
• LESS Official Documentation
• SASS vs. LESS: Which CSS Preprocessor Should You Use?
• Dart Sass GitHub
• Less.js GitHub