Sass Partials & @use / @forward

As a Sass codebase grows, keeping everything in one file stops being practical — variables, mixins, and component styles all want their own file. Sass supports this with partials, and with a proper module system (@use and @forward) for wiring those files together safely.

Partials: the underscore convention

A partial is a Sass file whose name starts with an underscore, like _variables.scss. The underscore tells Sass this file is meant to be brought into another file, not compiled to its own standalone CSS file.

SCSS

// _variables.scss — a partial
$brand-color: #0066cc;
$spacing-unit: 8px;

Why the underscore matters

Without the leading underscore, a Sass build tool would try to compile variables.scss into its own variables.css output file sitting alongside your real stylesheets — an empty-looking file nobody wants in the build output. The underscore prefix tells the compiler to skip that and only use the file's contents when something else imports it.

The old way: @import (deprecated)

For most of Sass's history, files were combined with @import. It works, but everything it imports lands in one global namespace — two partials that both define a variable called $color silently collide, with no error and no indication of which file a name came from.

SCSS

// The old way — everything shares one global namespace
@import 'variables';
@import 'mixins';

.card {
  color: $brand-color; // where did this come from? unclear at a glance
}

@import is now deprecated in Sass itself (it will eventually be removed from the language entirely) in favor of a real module system.

The modern way: @use

@use loads another Sass file as a namespaced module. By default, its members are accessed through a namespace derived from the filename, which makes the origin of every variable and mixin explicit at the call site.

SCSS

// _variables.scss
$brand-color: #0066cc;
$spacing-unit: 8px;

// _mixins.scss
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

SCSS

// card.scss
@use 'variables';
@use 'mixins';

.card {
  color: variables.$brand-color;
  padding: variables.$spacing-unit * 2;
  @include mixins.flex-center;
}

Each @use only loads the file once no matter how many other files also @use it, and members must be accessed through their namespace (or a custom alias set with as), eliminating the silent collisions @import was prone to.

Re-exporting with @forward

@forward is for building an entry-point file — commonly called something like _index.scss — that re-exports several partials so consumers only need one @use statement instead of several.

SCSS

// tools/_index.scss — forwards everything from this folder
@forward 'variables';
@forward 'mixins';
@forward 'functions';

SCSS

// card.scss — one @use pulls in everything the index forwards
@use 'tools';

.card {
  color: tools.$brand-color;
  @include tools.flex-center;
}

	@import	@use / @forward
Status	Deprecated, being phased out of the language.	The current, recommended module system.
Namespacing	None — everything is global.	Explicit — members accessed via a namespace.
Loaded per file	Every time it appears, potentially re-running the same code repeatedly.	Once per file, cached for every subsequent `@use`.
Re-exporting a group of files	Just chain more `@import`s.	Purpose-built for it via `@forward`.

A partial (_name.scss) is never compiled to its own CSS file — it only exists to be loaded by something else.
@use loads a file once, namespaced, with explicit member access — the modern default for every new Sass file.
@forward re-exports a partial’s members through another file, useful for building a single entry point over a folder of related partials.

See Sass Control Directives for @if, @for, and @each — real programming logic inside a stylesheet.