🧩 Variables, Nesting, and Partials

Sass Variables

A Sass variable stores a value you want to reuse. You declare one with a $ prefix and reference it anywhere a value is expected. Change the declaration once and every use updates.

// Declare design decisions once
$primary-color: #3b82f6;
$secondary-color: #22c55e;
$base-font: 'Roboto', sans-serif;
$base-font-size: 16px;
$spacing-unit: 8px;

// Reuse them everywhere
body {
  font-family: $base-font;
  font-size: $base-font-size;
  color: $primary-color;
  margin: $spacing-unit * 2;
}

.button {
  background-color: $secondary-color;
  padding: $spacing-unit ($spacing-unit * 2);
}

💡 Analogy — variables are a recipe's ingredient list. Instead of repeating "2 tablespoons of olive oil" in every step, the recipe just says "the olive oil." To swap in a different oil, you edit one line at the top — not every step. Sass variables work the same way for your colors, fonts, and sizes.

Variable Types & Maps

Sass variables can hold far more than colors. Each of these is a distinct value type Sass understands and can operate on:

The map is the most powerful of these. It bundles related values under named keys — perfect for a breakpoint table or a color palette:

@use 'sass:map';

$breakpoints: (
  'small':  576px,
  'medium': 768px,
  'large':  992px,
  'xlarge': 1200px
);

// Look a value up by key
.container {
  max-width: map.get($breakpoints, 'large'); // 992px
}

// Brand colors
$rausch: #ff5a5f;   // primary
$babu:   #00a699;   // secondary
$hof:    #484848;   // text

// 8-point spacing scale
$space-xs: 4px;
$space-sm: 8px;
$space-md: 16px;
$space-lg: 24px;
$space-xl: 32px;

Scope & the !default Flag

Like variables in any programming language, Sass variables have scope:

• Global — declared at the top level, outside any selector; usable everywhere.
• Local — declared inside a selector's braces; usable only in that selector and its nested children.

$global-color: blue;      // global

.container {
  $local-padding: 20px;   // local to .container
  padding: $local-padding;
  color: $global-color;

  .child {
    // local variables reach into nested selectors
    margin: math.div($local-padding, 2);
    border: 1px solid $global-color;
  }
}

.another-element {
  // margin: $local-padding;  // ❌ error — out of scope
  color: $global-color;       // ✅ global is fine
}

The !default flag

Adding !default to a declaration means "use this value only if the variable hasn't already been set." It is how libraries expose customizable defaults — set the variable before loading the library and your value wins.

// _theme.scss (the library)
$primary-color: blue !default;

body { color: $primary-color; }

// main.scss (your override)
@use 'theme' with ($primary-color: red);
// body ends up red, because you configured it before the default applied

Nesting

Nesting lets you place selectors inside one another, mirroring your HTML's shape. It removes the repeated ancestor prefixes that plain CSS forces on you.

Plain CSS

nav { background: #333; }
nav ul { margin: 0; padding: 0; list-style: none; }
nav ul li { display: inline-block; }
nav ul li a { color: white; padding: 10px 15px; display: block; }
nav ul li a:hover { background: #555; }

SCSS with nesting

nav {
  background: #333;

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

    li {
      display: inline-block;

      a {
        color: white;
        padding: 10px 15px;
        display: block;

        &:hover { background: #555; }
      }
    }
  }
}

The & Parent Selector & BEM

Inside a nested block, the ampersand & stands for the compiled selector of its parent. It is the key to writing pseudo-classes, modifiers, and state classes without breaking out of the nesting.

.button {
  padding: 10px 15px;
  background: blue;
  color: white;

  &:hover { background: darkblue; }        // .button:hover

  &::before {                              // .button::before
    content: "→";
    margin-right: 5px;
  }

  &.button--large {                        // .button.button--large
    padding: 15px 25px;
  }

  .dark-theme & {                           // .dark-theme .button
    background: navy;
  }
}

Notice the last rule: putting & at the end flips the relationship, letting a themed ancestor restyle the element.

BEM pairs beautifully with &

The BEM (Block__Element--Modifier) methodology and the & selector are a natural fit — you can build every element and modifier name by concatenating onto the block:

.card {
  border-radius: 4px;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  &__header {                       // .card__header
    padding: 16px;
    border-bottom: 1px solid #eee;
  }

  &__body { padding: 16px; }        // .card__body

  &--featured {                     // .card--featured
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
  }
}

.card { border-radius: 4px; background: white; box-shadow: 0 2px 4px rgba(0,0,0,.1); }
.card__header { padding: 16px; border-bottom: 1px solid #eee; }
.card__body { padding: 16px; }
.card--featured { box-shadow: 0 4px 8px rgba(0,0,0,.2); transform: scale(1.05); }

Partials, @use & @forward

A partial is a Sass file whose name begins with an underscore, e.g. _variables.scss. The underscore signals that it shouldn't compile to its own CSS file — it exists to be loaded into others.

Modern loading: @use

The current way to pull a partial in is @use. It loads the file as a module with its own namespace, so members are accessed as namespace.$member. This prevents the name collisions that plagued the old @import rule.

// _colors.scss
$primary: blue;
$secondary: green;

// main.scss
@use 'colors';

.button {
  background-color: colors.$primary;   // namespaced access
  color: white;
}

// Rename the namespace if you like:
@use 'colors' as c;
.link { color: c.$secondary; }

Re-exporting: @forward

Where @use loads a module for the current file, @forward makes another file's members available to whoever loads this file. It's how you build a single tidy entry point for a folder of partials:

// abstracts/_index.scss  — one door into the whole folder
@forward 'variables';
@forward 'functions';
@forward 'mixins';

// main.scss
@use 'abstracts';

body {
  color: abstracts.$text-color;
  font-family: abstracts.$font-stack;
}

The 7-1 Pattern

A widely used architecture for scaling Sass is the 7-1 pattern: seven folders of partials, all funneled into one main.scss entry file.

// main.scss — assemble the whole system
@use 'abstracts';
@use 'vendors/bootstrap';
@use 'base/reset';
@use 'base/typography';
@use 'layout/header';
@use 'layout/grid';
@use 'components/buttons';
@use 'components/cards';
@use 'pages/home';
@use 'themes/default';

Hands-on Exercise

.alert { padding: 16px; border-radius: 8px; background: #eff6ff; color: #1e3a8a; }
.alert-title { font-weight: 700; margin-bottom: 8px; }
.alert.alert--danger { background: #fef2f2; color: #991b1b; }
.alert.alert--danger .alert-title { color: #7f1d1d; }

$alert-pad: 16px;
$alert-radius: 8px;
$info-bg: #eff6ff;
$info-fg: #1e3a8a;
$danger-bg: #fef2f2;
$danger-fg: #991b1b;

.alert {
  padding: $alert-pad;
  border-radius: $alert-radius;
  background: $info-bg;
  color: $info-fg;

  &__title {
    font-weight: 700;
    margin-bottom: 8px;
  }

  &--danger {
    background: $danger-bg;
    color: $danger-fg;

    .alert__title { color: #7f1d1d; }
  }
}

Summary & Quiz

📚 Further Reading

• Sass — Variables
• Sass — Nesting
• Sass — @use and @forward
• CSS-Tricks — BEM 101

🚀 What's Next?

You can now store and organize values. Next, you'll make them do work: the following lesson covers mixins, functions, and operations — reusable parameterized blocks, value-returning functions, and math that powers spacing scales and utility generators.