Partials
Split styles into small files whose names start with an underscore.
// _buttons.scss -> @use 'buttons';A partial is a Sass file whose name starts with an underscore, like _buttons.scss. The underscore tells the compiler this file is a fragment meant to be included in others, not compiled into its own CSS file.
You reference the file without the underscore or extension: @use 'buttons' loads _buttons.scss.
Example
// File: _variables.scss
$primary: #CC6699;
$radius: 6px;
// File: main.scss
@use 'variables';
.btn {
background: variables.$primary;
border-radius: variables.$radius;
}When to use it
- A team splits a monolithic styles.scss into _variables.scss, _buttons.scss, and _layout.scss so each developer works on a focused file without merge conflicts.
- A developer creates _reset.scss for browser normalization and _typography.scss for font rules, then imports them into a single main.scss entry point.
- An agency uses partials per page section (_hero.scss, _footer.scss) so designers can hand off individual files without touching the entire stylesheet.
More examples
Partial file naming convention
Naming a file with a leading underscore marks it as a partial that Sass will not compile into a standalone CSS file.
// File: src/scss/_variables.scss
// The leading underscore tells Sass not to compile this file directly.
$primary: #2563eb;
$secondary: #7c3aed;
$font-base: 1rem;
$radius: 4px;Importing partials with @use
The main entry file @use-es each partial (without the underscore or extension) to assemble the full stylesheet from focused modules.
// File: src/scss/main.scss
@use 'variables';
@use 'reset';
@use 'typography';
@use 'components/buttons';
@use 'components/cards';Partial folder structure
A typical partial folder layout separates variables, mixins, and component styles into sub-directories loaded from a single entry file.
scss/
main.scss
_variables.scss
_mixins.scss
components/
_buttons.scss
_cards.scss
layout/
_grid.scss
_header.scss
Discussion