Partials and file structure

As a site grows, one main.scss becomes thousands of lines. Sass lets you split styles into many small files and still get one CSS file. Files that exist only to be included into another file are called partials; their names start with an underscore: _buttons.scss.

Creating a partial

Create styles/_buttons.scss with the button styles:

// styles/_buttons.scss
.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
}

The underscore tells Sass: do not compile this file on its own. When you compile the whole folder with sass styles:css, no _buttons.css appears.

Including a partial

The main file includes partials with the @use rule. The underscore and the .scss extension are omitted:

// styles/_cards.scss
.card {
  padding: 16px;
  border: 1px solid #ddd;
}

// styles/main.scss
@use "buttons";
@use "cards";

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
}
 
.card {
  padding: 16px;
  border: 1px solid #ddd;
}

The CSS of every partial ends up in main.css, in the order of the @use lines. The page still links one file, css/main.css.

Folders

Partials are grouped into folders by role. The well-known 7-1 pattern suggests seven folders and one main file. For a small site four folders are enough:

styles/
├── abstracts/        ← variables, mixins, functions: no CSS output
│   ├── _variables.scss
│   └── _mixins.scss
├── base/             ← reset, typography, styles of tags
│   └── _base.scss
├── components/       ← buttons, cards, forms
│   ├── _buttons.scss
│   └── _cards.scss
├── layout/           ← header, footer, grid
│   └── _header.scss
└── main.scss         ← only @use lines

The full 7-1 pattern adds pages/ (styles of single pages), themes/ and vendors/ (third-party CSS). Add them when you really need them.

A path to a file in a folder

The path in @use is relative to the current file. main.scss includes components like this:

// styles/components/_buttons.scss
.btn {
  padding: 8px 16px;
}

// styles/base/_base.scss
body {
  margin: 0;
  font-family: system-ui, sans-serif;
}

// styles/main.scss
@use "base/base";
@use "components/buttons";

body {
  margin: 0;
  font-family: system-ui, sans-serif;
}
 
.btn {
  padding: 8px 16px;
}

Order matters: base styles go first, components after them, so components can override the base.

Common mistake

A file without the underscore is not a partial. If you name it buttons.scss and compile the folder with sass styles:css, Sass creates an extra css/buttons.css next to main.css, and the same rules end up in two files. Start every partial's name with _.