Partials & Modules

Real projects don't keep every style in one giant file. Sass lets you split styles across multiple files and pull them together with a single import — starting with a naming convention called a partial.

Partials: files that don't compile on their own

A filename starting with an underscore, like _variables.scss, is a partial. Sass knows not to compile it into its own separate .css file — it only exists to be loaded into other files:

$primary-color: #1b6ec2;
$spacing-unit: 8px;

Nothing happens if you compile _variables.scss directly — and typically you wouldn't try to. Its variables only become useful once another file loads it.

Loading a partial with @use

The modern way to load one Sass file into another is @use. Unlike a raw copy-paste, @use keeps the loaded file's variables and mixins namespaced, so they don't silently collide with names in the file that loaded them:

@use 'variables';

.button {
  background: variables.$primary-color;
  padding: variables.$spacing-unit * 2;
}

.button {
  background: #1b6ec2;
  padding: 16px;
}

@use 'variables'; loads _variables.scss — Sass automatically knows to look for the underscore-prefixed file even though the @use line doesn't mention the underscore. Every name from that file has to be qualified with its namespace (variables.$primary-color, derived from the filename) rather than used bare, which is exactly what prevents two different partials from accidentally defining a variable with the same name and clashing.

@forward: re-exporting from one entry point

On a larger project with many partials, @forward lets one file act as a single entry point that re-exports several others, so the rest of your codebase only has to @use one file:

@forward 'variables';
@forward 'mixins';

@use 'core';

.button {
  background: core.$primary-color;
}

Now anything added to _variables.scss or _mixins.scss is automatically available through core, without main.scss needing a separate @use line for each one.