Creating and Importing Partials

A SASS partial is a file whose name begins with an underscore, such as `_variables.scss` or `_buttons.scss`. The leading underscore signals to the SASS compiler that this file should not be compiled into its own standalone CSS file. Instead, partials are intended to be imported into other SASS files using `@use` or `@import`. Breaking a stylesheet into partials is the key to managing large CSS codebases. Each partial focuses on a single concern — typography, layout, one specific component — keeping files short, focused, and easy to navigate. A main entry-point file (commonly `main.scss` or `app.scss`) imports all the partials and is the only file that gets compiled. When using `@use` (the modern approach), you reference the partial by path without the leading underscore and without the file extension. SASS resolves both automatically. Partials loaded with `@use` become namespaced modules, meaning their variables and mixins are accessed via a namespace prefix, which prevents naming collisions across a large project.

Example

// ── Typical partial-based project structure ───────────────────────────────────

// scss/
// ├── main.scss              ← entry point, imports everything
// ├── _variables.scss        ← design tokens
// ├── _functions.scss        ← custom functions
// ├── _mixins.scss           ← reusable mixins
// ├── _reset.scss            ← CSS reset / normalize
// ├── _typography.scss       ← type scale, headings, body
// ├── _layout.scss           ← grid, containers
// └── components/
//     ├── _buttons.scss
//     ├── _forms.scss
//     └── _cards.scss

// ── main.scss ─────────────────────────────────────────────────────────────────

// Load abstracts first (they emit no CSS on their own)
@use 'variables';
@use 'functions';
@use 'mixins';

// Base layers
@use 'reset';
@use 'typography';
@use 'layout';

// Components (order affects cascade for equal-specificity rules)
@use 'components/buttons';
@use 'components/forms';
@use 'components/cards';

// ── _typography.scss ─────────────────────────────────────────────────────────

@use 'variables' as v;   // access as v.$font-size-base, v.$color-dark, etc.

body {
    font-family : v.$font-family-base;
    font-size   : v.$font-size-base;
    color       : v.$color-dark;
    line-height : v.$line-height-base;
}

h1, h2, h3, h4, h5, h6 {
    font-weight  : 700;
    line-height  : 1.2;
    margin-bottom: 0.5em;
}

HTML

Full Editor

Related Resources

SASS / SCSS Reference

Complete tag & property list

SASS / SCSS How-To Guides

Step-by-step practical guides

SASS / SCSS Exercises

Practice what you've learned