Sass Partials and Aliases Explained

Understanding Sass & SCSS Partials

Partials let you split Sass or SCSS into small, focused files that compile into a single stylesheet. They keep code modular and make large projects easier to manage.

In this tutorial you will learn what Sass partials are, how to create and import them using modern Sass and SCSS, practical file layouts, and best practices.

What are Sass Partials?

Partials are Sass files that are not compiled to standalone CSS on their own but are instead imported into a main stylesheet. They hold reusable pieces of style such as variables, mixins, and component rules, allowing you to break a large stylesheet into focused, maintainable modules.

• Sass Partials always start with an underscore, e.g. _variables.scss
• The underscore tells Sass to skip compiling the file on its own
• Partials are imported into a main stylesheet to be included in the final CSS
• They keep code organized by grouping variables, mixins, or components
• Using partials improves reuse and avoids duplication
• Partials support a modular workflow where each file has a clear purpose

$primary-color: #3498db;
$secondary-color: #2ecc71;
$danger-color: #e74c3c;
$warning-color: #f39c12;
$info-color: #1abc9c;

@mixin center-flex {
	display: flex;
	justify-content: center;
	align-items: center;
}

@mixin text-truncate {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@mixin box-shadow($x: 0, $y: 2px, $blur: 6px, $color: rgba(0, 0, 0, 0.2)) {
	box-shadow: $x $y $blur $color;
}

How to Create Sass Partials?

Create Sass or SCSS partials with an underscore prefix and place them in logical folders such as base, components, and utilities.

Sass Partials Folder Structure:

• Name files with underscore prefix
• Use clear, purpose-based names
• Place in folders like base, components, utilities
• Keep each partial single-purpose
• Organize variables, mixins, functions separately
• Group UI elements like buttons, cards, forms
• Avoid mixing layout and theme styles in one file

/sass
    /base
        _reset.scss
        _variables.scss
    /components
        _button.scss
        _card.scss
    main.scss

Importing Sass or SCSS Partials

To effectively work with Sass or SCSS partials, use modern @use and @forward directives to import them into your stylesheets. Avoid legacy @import rule for new projects because @use directive provides namespace control and clearer dependency flow.

• @use brings a partial into scope with optional namespace
• @forward re-exports members from one module to another
• @import remains for legacy code but is not recommended

When importing partials, you don’t include the leading underscore or the file extension. Sass automatically recognizes files starting with an underscore as a partial and resolves it correctly.

For example, @use "colors"; will load _colors.scss behind the scenes.

@use "colors";
@use "mixins";

.button {
    background-color: colors.$primary-color;
    @include mixins.center-flex;
}

@use colors
@use mixins

.button
    background-color: colors.$primary-color
    @include mixins.center-flex

.button {
    background-color: #3498db;
    display: flex;
    justify-content: center;
    align-items: center;
}

Explanation:

• Use @use for namespaced partial imports
• Reference variables as colors.$primary-color
• Apply mixins with @include mixins.center-flex

Sass Partial Aliases

We can also use partial namespace aliases in SCSS and indented Sass to keep references short, consistent, and explicit.

• Aliases reduce repetition in code
• Keep naming consistent across files
• Improve readability in large projects

@use "colors" as c;
@use "mixins" as m;

.button {
    background-color: c.$primary-color;
    @include m.center-flex;
}

@use colors as c
@use mixins as m

.button
    background-color: c.$primary-color
    @include m.center-flex

.button {
    background-color: #3498db;
    display: flex;
    justify-content: center;
    align-items: center;
}

Explanation:

• Alias partials with @use ... as
• Use short prefixes like c or m
• Reference variables as c.$primary-color
• Call mixins with @include m.center-flex

Best Practices

When working with Sass partials, focus on clarity, maintainability, and modular structure so styles remain easy to scale and reuse.

• Keep one responsibility per partial
• Keep partials small and descriptive
• Avoid circular @use dependencies
• Use @forward directive to build a central entry module
• Document shared variables, mixins, and functions
• Name files clearly for discoverability
• Organize partials into logical folders
• Import partials through a single entry stylesheet