🎨 Sass/SCSS Introduction and Setup

What Is Sass?

Sass — Syntactically Awesome Style Sheets — is a CSS preprocessor. That means it is a language that looks like CSS but adds real programming features on top: variables, nesting, reusable blocks called mixins, functions, math, and even loops and conditionals. You write Sass, a tool compiles it, and out comes ordinary CSS that any browser can render.

The key idea is that browsers never see your Sass. They only ever load the compiled .css file. Sass is a tool for authoring stylesheets, not a new thing browsers had to learn.

💡 Analogy — Sass is a kitchen appliance. Think of Sass as a food processor. Raw ingredients (your Sass code) go in, and a finished dish (CSS) comes out. Your dinner guests — the browser — only ever taste the final dish. They never see the appliance or the technique behind it.

Two Syntaxes: Sass vs SCSS

Confusingly, "Sass" names both the project and one of its two syntaxes. Here is the distinction:

• The indented syntax (.sass) — the original. It drops braces and semicolons and relies on indentation, like Python.
• SCSS (.scss) — "Sassy CSS". It uses the exact braces-and-semicolons syntax of regular CSS, and every valid CSS file is already valid SCSS.

The same navigation styles, written both ways:

Indented Sass syntax

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

  li
    display: inline-block

  a
    display: block
    padding: 6px 12px
    text-decoration: none

SCSS syntax

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

  li {
    display: inline-block;
  }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Why Use a Preprocessor?

Plain CSS is wonderfully simple, but on a large codebase its simplicity turns into pain: the same hex color copied into forty places, deeply repeated selector prefixes, no way to do arithmetic, and no real way to package a reusable chunk of styling. Sass targets exactly those gaps.

How Compilation Works

Because browsers cannot read Sass, a compiler stands between your source and the browser. You edit .scss; the compiler watches for changes and regenerates .css; the browser loads that CSS.

Your HTML always links the compiled file, exactly as it would with hand-written CSS:

<link rel="stylesheet" href="dist/css/style.css">

Installing & Running Sass

There are several ways to get a compiler running. Pick the one that fits how you already work.

Method 1 — Global install (fastest to start)

If you have Node.js installed, add the official Dart Sass command-line tool globally:

npm install -g sass

Compile a file once:

sass input.scss output.css

Recompile automatically on every save with watch mode:

sass --watch input.scss output.css

Watch a whole folder, mapping a source directory to an output directory:

sass --watch scss:css

Method 2 — Project dependency (recommended for real projects)

Keeping Sass local to the project means every teammate compiles with the same version. Add it as a dev dependency:

npm install sass --save-dev

Then wire up scripts in package.json:

{
  "scripts": {
    "sass": "sass src/scss:dist/css --watch",
    "sass:build": "sass src/scss:dist/css --style=compressed --no-source-map"
  }
}

Run the watcher while developing, or the minified build for production:

npm run sass          # develop with live recompile
npm run sass:build    # one-off compressed output

Method 3 — Build-tool integration

Most modern bundlers understand SCSS with almost no configuration:

• Vite — just install sass and import a .scss file; no config needed.
• Webpack — add the loader chain: npm install sass-loader sass css-loader style-loader --save-dev.
• Next.js / Astro / SvelteKit — install sass and SCSS support turns on automatically.

Method 4 — VS Code extension (no terminal)

For quick learning without touching the command line, install the Live Sass Compiler extension. A "Watch Sass" button appears in the status bar; click it and it compiles on save.

$brand: #3b82f6;
.btn { color: $brand; }

.btn { color: #3b82f6; }

A Modular Project Structure

The real payoff of Sass is splitting one giant stylesheet into small, focused partials. A partial is any file whose name starts with an underscore (_variables.scss). The leading underscore tells the compiler "don't build this into its own CSS file — it is only meant to be pulled into another file."

project/
├── src/
│   ├── scss/
│   │   ├── main.scss          # entry point — pulls in every partial
│   │   ├── _variables.scss    # colors, fonts, spacing tokens
│   │   ├── _base.scss         # resets and base element styles
│   │   ├── _layout.scss       # header, footer, grid
│   │   ├── _components.scss    # buttons, cards, forms
│   │   └── _utilities.scss    # helper classes
│   └── index.html
└── dist/
    └── css/
        └── main.css           # the one compiled output

Only main.scss lacks an underscore, so it is the only file the compiler emits. Inside it, you pull the partials together. Modern Sass uses @use for this (we cover it fully in the next lessons); the older @import rule still works but is now deprecated:

// main.scss — modern loading with @use
@use 'variables';
@use 'base';
@use 'layout';
@use 'components';
@use 'utilities';

Hands-on Exercise

$link-color: #3b82f6;

nav {
  background: #0f172a;

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

    &:hover {
      text-decoration: underline;
    }
  }
}

nav { background: #0f172a; }
nav a { color: #3b82f6; text-decoration: none; }
nav a:hover { text-decoration: underline; }

Best Practices

Summary & Quiz

📚 Further Reading

• Official Sass Documentation
• Sass — Install
• SassMeister — an online Sass playground

🚀 What's Next?

Now that Sass compiles on your machine, the next lesson digs into the three features you'll reach for every single day: variables, nesting, and partials. You'll learn variable scope, the powerful & parent selector, and how to architect a project with the 7-1 pattern.