Episode 1 — Fundamentals / 1.7 — Working With SASS

1.7.a — What Is SASS?

In one sentence: SASS is a CSS preprocessor that adds variables, nesting, mixins, functions, and logic to your stylesheets — then compiles everything down to plain CSS that any browser can understand.

Navigation: ← 1.7 Overview · 1.7.b — SCSS vs SASS & Setup →

1. The problem SASS solves

Plain CSS is powerful, but at scale it hits pain points:

Pain point	Example
Repeated values	The same brand color hex copied across 40 files
No nesting	Flat selectors like `.card .card-header .card-title` repeated everywhere
No reuse mechanism	The same media-query breakpoint pattern pasted in dozens of places
No logic	Cannot loop to generate utility classes (`mt-1`, `mt-2`, … `mt-10`)
File organization	One giant CSS file or manual `<link>` stacking with no dependency graph

Preprocessors solve all five. SASS is the oldest and most widely adopted.

2. Key features at a glance

Feature	What it does	Quick example
Variables	Store values once, reuse everywhere	`$primary: #3b82f6;`
Nesting	Write child selectors inside parent blocks	`.nav { a { color: $primary; } }`
Partials & Imports	Split code into small files, combine at build	`@use 'abstracts/variables';`
Mixins	Reusable blocks of declarations you `@include`	`@mixin flex-center { … }`
Functions	Compute and return values	`@function rem($px) { @return … }`
Operators	Math inside stylesheets	`width: 100% / 3;`
Control flow	`@if`, `@for`, `@each`, `@while`	Generate grids, palettes, utilities
Inheritance	Share rules via `@extend`	`%btn-base { padding: … }`

3. SASS vs plain CSS

┌─────────────────────────────────────────────────────────┐
│                  You write (.scss)                       │
│                                                         │
│  $primary: #3b82f6;                                     │
│  .btn {                                                 │
│    background: $primary;                                │
│    &:hover { background: darken($primary, 10%); }       │
│  }                                                      │
└────────────────────┬────────────────────────────────────┘
                     │  sass --watch src:dist
                     ▼
┌─────────────────────────────────────────────────────────┐
│               Browser receives (.css)                   │
│                                                         │
│  .btn { background: #3b82f6; }                          │
│  .btn:hover { background: #2563eb; }                    │
└─────────────────────────────────────────────────────────┘

The browser never sees SCSS. SASS is a build-time tool — it produces standard CSS before deployment.

4. The compilation concept

You write .scss (or .sass) files during development.
A compiler (dart-sass) reads those files.
It resolves variables, evaluates functions, expands mixins, and flattens nesting.
It outputs .css files the browser understands.
Optionally generates source maps so DevTools map back to your SCSS lines.

src/
  styles/
    main.scss        ← you edit this
    _variables.scss
    _buttons.scss

dist/
  styles/
    main.css         ← compiler generates this
    main.css.map     ← source map (optional)

5. Brief history

Year	Milestone
2006	Hampton Catlin creates SASS (Ruby-based, indentation syntax)
2009	SCSS syntax introduced (CSS-compatible curly braces)
2014	LibSass (C/C++) brings faster compilation
2016	Dart Sass becomes the reference implementation
2019	`@use` / `@forward` module system replaces `@import`
2022	LibSass and Node Sass officially deprecated — Dart Sass is the only supported compiler

6. SASS vs other preprocessors

	SASS/SCSS	Less	Stylus
Syntax	SCSS (CSS-like) or indented	CSS-like	Flexible (optional braces/semicolons)
Features	Full: loops, conditionals, modules	Variables, mixins, functions	Variables, mixins, conditionals
Ecosystem	Largest — Bootstrap, Tailwind (build), most frameworks	Bootstrap 3 used Less	Smaller community
Compiler	Dart (fast, maintained)	JavaScript	JavaScript
Module system	`@use` / `@forward` (namespaced)	`@import` only	`@import` / `@require`

SCSS dominates modern front-end. When a job listing says "SASS experience," they almost always mean SCSS syntax.

7. Key takeaways

SASS is a build tool — it extends CSS with programming features, then compiles to plain CSS.
SCSS is the modern, CSS-compatible syntax (curly braces + semicolons). The indented .sass syntax is rarely used today.
Dart Sass is the only actively maintained compiler. Node Sass and LibSass are deprecated.
Features — variables, nesting, mixins, functions, control flow, partials — solve real CSS maintenance problems.
The browser receives standard CSS. SASS adds zero runtime cost.

Explain-It Challenge

Explain without notes:

Why would a team choose SCSS over plain CSS for a large project? Name three specific problems it solves.
What does "compilation" mean in the context of SASS — what goes in and what comes out?
Why is Dart Sass the recommended compiler today (what happened to Node Sass)?

Navigation: ← 1.7 Overview · 1.7.b — SCSS vs SASS & Setup →