CSS Academy · Lesson

Variables Nesting and Partials

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

Lesson 1 of 413 steps

Variables Nesting and Partials is a free CSS Academy lesson on CoddyKit. This is 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, and your progress syncs across the web and the CoddyKit app. The CSS Academy course includes 4 lessons in total.

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.

<button class="button">Sass Variables</button>

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.

<div class="card">
    <div class="card-title">Card title</div>
    <div class="card-body">Card body text</div>
  </div>

& Parent Selector

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

<button class="button">Button</button>
  <button class="button active">Active state (font-weight: bold)</button>
  <button class="button--primary">BEM modifier: button--primary</button>
  <span class="button__icon">&#128279;</span> BEM element: 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:

<h2 class="heading">Namespaced heading (t.$primary-color)</h2>

@forward for Libraries

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

<span class="badge">Forwarded token (lib.$primary-color)</span>

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; } }?

Answer it in the interactive lesson

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.

Free to start

Learn CSS with an AI tutor — free

Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.

Courses: 40
Lessons: 159

Start learning free View the full course

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. 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. The CSS Academy course includes 4 lessons in total.

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, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 4.

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