CSS Preprocessors (Sass/LESS)

Analogy categoryAnalogies

Introduction

CSS preprocessors like Sass and LESS are scripting languages that extend CSS with programming-like features. They compile down to plain CSS that browsers understand, but let authors write styles using variables, nested rules, mixins, functions, and file imports. This makes large stylesheets easier to organize, reduces repetition, and speeds up development. Sass (Syntactically Awesome Style Sheets) is the most widely used preprocessor and ships in two syntaxes: the older indented .sass syntax and the CSS-like .scss syntax, which is the industry default.

🏏

Cricket analogy: Sass is like a bowling coach's shorthand notes that get expanded into a full match plan before play begins — you write compact instructions with variables and mixins, and the compiler turns them into the plain CSS the browser 'umpires' understand.

Syntax

scss

// Variables
$primary-color: #3498db;
$spacing-unit: 8px;

// Nesting
.card {
  padding: $spacing-unit * 2;
  border: 1px solid $primary-color;

  &__title {
    font-weight: bold;
  }

  &:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  }
}

// Mixin with a parameter
@mixin flex-center($gap: 0) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: $gap;
}

.toolbar {
  @include flex-center(12px);
}

// Partial import
@use 'variables' as v;

Explanation

Variables (declared with $) store reusable values such as colors, fonts, and spacing so they can be updated in one place. Nesting lets you write child selectors inside a parent rule, mirroring the HTML structure and avoiding repeated selector prefixes; the & symbol refers back to the parent selector, which is essential for BEM-style modifiers and pseudo-classes. Mixins (@mixin / @include) package reusable blocks of declarations, optionally accepting parameters like a function. Partials are Sass files prefixed with an underscore (e.g. _variables.scss) that are not compiled to their own CSS file but are pulled into other files with @use or the older @import, enabling a modular file structure. LESS offers similar features (variables with @, mixins as class calls, nesting) but with slightly different syntax and fewer built-in functions than modern Sass.

🏏

Cricket analogy: A Sass variable like $team-color is like fixing a team's kit color once in the scorecard so every graphic updates together, while & nesting mirrors how a bowler's figures are always shown nested under their team's innings.

Example

scss

// _buttons.scss (a partial)
@mixin button-variant($bg, $color: #fff) {
  background-color: $bg;
  color: $color;
  border: none;
  border-radius: 4px;
  padding: 0.5em 1em;

  &:hover {
    background-color: darken($bg, 10%);
  }
}

.btn-primary {
  @include button-variant(#2563eb);
}

.btn-danger {
  @include button-variant(#dc2626);
}

Sass compiles to standard CSS using the Dart Sass compiler (via a build tool like Vite, Webpack, or the sass CLI). Browsers never run .scss files directly — they only understand the compiled output.

Key Takeaways

Sass and LESS extend CSS with variables, nesting, mixins, functions, and imports.
SCSS is the CSS-compatible Sass syntax and is the modern default over the older indented .sass syntax.
The & symbol references the parent selector, useful for pseudo-classes and BEM modifiers.
Partials (files starting with _) are combined via @use/@import into a single compiled stylesheet.
Preprocessors always compile to plain CSS before reaching the browser.

Practice what you learned

1. What symbol is used to declare a variable in Sass (SCSS syntax)?

2. What does the & symbol represent inside a nested Sass rule?

3. What is a Sass 'partial' file typically used for?

4. Which statement about CSS preprocessors is true?

Was this page helpful?

Browser Developer Tools

Related Study Notes in Web Development

Browse all study notes

Web Development

WebSockets Study Notes

Web Development · 30 topics

Web Development

WebAssembly Study Notes

WebAssembly · 30 topics

Web Development

gRPC Study Notes

Protocol Buffers · 30 topics

Web Development

Spring Boot Study Notes

Java · 30 topics

Web Development

Flask Study Notes

Python · 30 topics

Web Development

Django Study Notes

Python · 30 topics

Topics covered

#HTMLCSS#HTMLCSSStudyNotes#WebDevelopment#CSSPreprocessorsSassLESS#CSS#Preprocessors#Sass#LESS#StudyNotes#SkillVeris

Introduction

Syntax

Explanation

Example

Key Takeaways

Practice what you learned

You May Also Like

Related Reading

Related Study Notes in Web Development

Topics covered