# Sass Explained: CSS With Variables, Nesting, and Logic

## Introduction

`CSS` (covered twice already) works, but it repeats itself: the same colour value in twenty places, the same media query copied again and again, no variables, no reuse. Sass, created by Hampton Catlin in 2006, is a preprocessor — a language that adds programming features to `CSS` and then compiles down to plain `CSS` the browser understands. Its `SCSS` syntax (the standard today) looks like `CSS` with superpowers, which is why it spread through large codebases long before `CSS` itself gained variables.

## Variables, nesting, and mixins

Three features explain most of Sass's appeal:

```scss
$primary: #2563eb;
$spacing: 16px;
.card {
  padding: $spacing;
  border: 1px solid $primary;
  h2 {
    color: $primary;
    margin-bottom: $spacing;
  }
  &:hover {
    border-color: darken($primary, 10%);
  }
}
@mixin center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero {
  @include center;
}
```

Variables (`$primary`) mean a colour changes in one place, not twenty. Nesting mirrors your HTML structure, so a card's heading styles live inside the card's block. Mixins (`@mixin`) are reusable chunks of styles you include with `@include` — the closest `CSS` gets to functions. Together they turn a sprawling stylesheet into something organised, especially on large sites where plain `CSS` grows messy.

## The honest trade

Sass's trade is a build step: browsers don't run Sass, so your code must be compiled to `CSS` first (usually by Vite, Webpack, or another tool from earlier posts). And modern `CSS` has closed much of the gap — native custom properties now handle variables, and native nesting is arriving in browsers — so for small projects, plain `CSS` plus Tailwind (the previous batch) may be enough. Sass still earns its place on large codebases, where its mixins, partials (splitting styles across files), and functions organise complexity that plain `CSS` handles awkwardly.

## Takeaway

Sass is `CSS` with variables, nesting, and mixins, compiled down to plain `CSS`. It caught on by fixing `CSS`'s repetition problem, and while modern `CSS` has caught up on variables, Sass remains the organiser of choice for large stylesheets.

Originally published at https://practicaldevblog.blogspot.com/2026/10/sass-explained-css-with-variables.html