CSS Academy · Lesson

Variables Nesting and Partials

Use Sass variables for reusable values, nest selectors for readability, and split code into partials.

Variables Nesting and Partials is a free CSS Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the CSS Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

What is Sass?

Sass (Syntactically Awesome Stylesheets) is a CSS preprocessor that extends CSS with variables, nesting, mixins, functions, and more. Sass files compile to standard CSS.

Two Sass Syntaxes

Sass has two file formats:

.scss — CSS-compatible superset syntax (most popular)
.sass — indentation-based syntax (no curly braces or semicolons)

This course covers SCSS.

Sass Variables

Sass variables use the $ prefix. They are resolved at compile time — unlike CSS custom properties, they are not live in the browser.

$primary-color: #3b82f6;
$font-size-base: 1rem;
$spacing-md: 16px;

.button {
  background: $primary-color;
  font-size: $font-size-base;
  padding: $spacing-md;
}

Sass Variables vs CSS Custom Properties

Key differences:

Sass variables: compile time, not in browser, cannot change at runtime
CSS custom properties: live in browser, can be changed by JS, cascade-aware

Modern practice: use both. Sass variables for build-time logic; CSS custom properties for runtime theming.

Nesting

Sass allows nesting selectors inside each other, mirroring the HTML structure. The compiled output uses descendant selectors.

.card {
  background: white;
  border-radius: 8px;

  .card-title {
    font-size: 1.5rem; /* compiles to: .card .card-title */
  }

  .card-body {
    padding: 16px; /* compiles to: .card .card-body */
  }
}

& Parent Selector

The & refers to the parent selector, enabling BEM-like patterns and state selectors:

.button {
  background: royalblue;

  &:hover { background: #2563eb; }
  &.active { font-weight: bold; }
  &--primary { background: red; } /* BEM: .button--primary */
  &__icon { margin-right: 8px; }  /* BEM: .button__icon */
}

Nesting Depth Warning

Avoid nesting deeper than 3 levels. Deep nesting produces overly specific selectors and makes the CSS brittle. If you find yourself nesting deeply, the CSS architecture likely needs refactoring.

Sass Partials

A partial is a Sass file whose name starts with an underscore (_card.scss). Partials are not compiled independently — they must be imported into another file. This avoids generating unwanted CSS output files.

@use for Imports

Modern Sass uses @use to import partials. It provides namespacing to avoid variable conflicts:

// main.scss
@use 'tokens' as t;
@use 'components/button';

.heading { color: t.$primary-color; }

@forward for Libraries

@forward re-exports a module's members so they can be used by files that import your library:

// _index.scss
@forward 'tokens';
@forward 'mixins';

Legacy @import (Deprecated)

The older @import directive is deprecated in Dart Sass. Migrate to @use and @forward for better namespacing and performance.

Quick Check

What CSS selector does Sass generate from nesting .nav { .link { color: white; } }?

Recap

Sass variables ($name) are resolved at compile time. Nesting mirrors HTML structure but avoid going deeper than 3 levels. & references the parent selector for pseudo-classes, states, and BEM modifiers. Partials (_file.scss) are imported, not compiled directly. Use @use (not @import) for modern Sass module loading.

Frequently asked questions

Is the “Variables Nesting and Partials” lesson free?

Yes — the full text of “Variables Nesting and Partials” is free to read here on the web, and the CSS Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the CSS Academy course, upgrade to CoddyKit PRO.

What will I learn in “Variables Nesting and Partials”?

Use Sass variables for reusable values, nest selectors for readability, and split code into partials. You practise CSS Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start CSS Academy?

No prior experience is required. CSS Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Variables Nesting and Partials” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this CSS Academy lesson?

Yes. Every CSS Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to CSS Academy