CSS preprocessors: SASS, SCSS, and LESS

What are CSS Preprocessors?

CSS preprocessors are scripting languages that extend CSS with features like variables, nesting, mixins, and functions. The preprocessor code is compiled into standard CSS before being served to the browser.

Popular Preprocessors

Preprocessor	Extension	Key Feature
SASS	`.sass`	Indentation-based syntax (no braces/semicolons)
SCSS	`.scss`	CSS-like syntax with braces and semicolons
LESS	`.less`	Similar to SCSS, uses `@` for variables

SCSS is the most popular — it's a superset of CSS, meaning any valid CSS is also valid SCSS.

Key Features

1. Variables

scss

// SCSS
$primary-color: #007bff;
$font-stack: 'Helvetica Neue', sans-serif;

body {
  font-family: $font-stack;
  color: $primary-color;
}

2. Nesting

scss

.navbar {
  display: flex;
  
  &__item {
    padding: 10px;
    
    &:hover {
      background: #f0f0f0;
    }
    
    &--active {
      font-weight: bold;
    }
  }
}

3. Mixins

scss

@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

@mixin responsive($breakpoint) {
  @if $breakpoint == tablet {
    @media (min-width: 768px) { @content; }
  } @else if $breakpoint == desktop {
    @media (min-width: 1024px) { @content; }
  }
}

.hero {
  @include flex-center;
  height: 100vh;
  
  @include responsive(tablet) {
    height: 60vh;
  }
}

4. Partials and Imports

scss

// _variables.scss (partial — not compiled separately)
$primary: #007bff;

// main.scss
@use 'variables';

body { color: variables.$primary; }

5. Functions and Operations

scss

@function rem($pixels) {
  @return $pixels / 16 * 1rem;
}

h1 { font-size: rem(32); } // 2rem

SCSS vs Native CSS Custom Properties

Feature	SCSS Variables	CSS Custom Properties
Compiled at	Build time	Runtime
Dynamic changes	No	Yes (via JS)
Scoping	Lexical	Cascading
Media query support	No	Yes
Nesting, mixins	Yes	No

When to Use Preprocessors

Use preprocessors when:

You need mixins, functions, loops
Working with large codebases benefiting from partials
Your project uses BEM or other naming conventions with nesting

Consider native CSS when:

You need runtime theming (dark/light mode)
The project is small and simple
You want fewer build dependencies

Important:

Modern CSS has adopted many preprocessor features (variables, nesting, calc()). However, SCSS remains widely used in production for mixins, functions, and better code organization. Many projects use both SCSS and CSS custom properties together.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

Finished reading?

Practice Problems