Sass Partials and Modules

Big style sheets are easier to manage when you split them into small files, and Sass modules join them back together.

Partials

A partial is a Sass file whose name starts with an underscore, like _variables.scss. The underscore tells Sass: "do not make a separate CSS file from this; it will be loaded by another file".

A typical project looks like this:

scss/
  _variables.scss
  _base.scss
  _buttons.scss
  _navbar.scss
  style.scss

Only style.scss has no underscore, so only style.css is created.

Loading a File with @use

@use loads another Sass file. You leave out the underscore and the .scss ending.

_variables.scss:

$brand: #cc6699;
$font-main: "Poppins", sans-serif;
$radius: 6px;

style.scss:

@use "variables";

body {
  font-family: variables.$font-main;
}

.badge {
  background-color: variables.$brand;
  border-radius: variables.$radius;
}

body {
  font-family: "Poppins", sans-serif;
}

.badge {
  background-color: #cc6699;
  border-radius: 6px;
}

Namespaces

With @use, everything from a file is reached through a namespace, which by default is the file name. That is why we wrote variables.$brand, not just $brand.

Namespaces stop name clashes: two files can both have a $size variable without problems. If the name is long, give it a shorter one with as:

@use "variables" as v;

.button {
  background-color: v.$brand;
  border-radius: v.$radius;
}

.button {
  background-color: #cc6699;
  border-radius: 6px;
}

Configuring a Module with with()

If a module uses !default variables, you can set your own values while loading it.

_library.scss:

$gap: 8px !default;
$text: #333 !default;

.stack {
  display: flex;
  flex-direction: column;
  gap: $gap;
  color: $text;
}

style.scss:

@use "library" with (
  $gap: 20px,
  $text: #111
);

.stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  color: #111;
}

This is exactly how you change Bootstrap's colours and spacing when you build it from its Sass source.

Sharing Files with @forward

@forward passes a file's variables, mixins and functions on to whoever loads the current file. It lets you collect many small files behind one name. A file called _index.scss inside a folder is loaded when you @use the folder name.

scss/
  theme/
    _colors.scss
    _sizes.scss
    _index.scss
  _buttons.scss
  style.scss

theme/_index.scss:

@forward "colors";
@forward "sizes";

_buttons.scss:

@use "theme";

.btn {
  background-color: theme.$primary;
  border-radius: theme.$radius;
}

Now one @use "theme" gives access to everything in both files.

What About @import?

Older Sass code uses @import "variables";. It still works, but it is deprecated and will be removed in a future version of Sass. @import puts every variable into one global space and can load the same file many times. Use @use and @forward in new code.

Exercise