Partial files with underscore prefix in SASS

Introduction

Partial files help organize your styles into smaller pieces. The underscore prefix tells Sass not to create a separate CSS file for that part.

When you want to split your styles into smaller, manageable files.

When you want to reuse common styles like colors or fonts across different files.

When you want to keep your main stylesheet clean and easy to read.

When you want to avoid generating extra CSS files for helper styles.

When you want to share variables or mixins between different Sass files.

Syntax

SASS

// Filename: _partial.scss

// Use underscore at the start of the filename
// Import in main file without underscore
@use 'partial';

The underscore (_) at the start means Sass treats it as a partial file.

You do not compile partial files directly; instead, you import them into main files.

Examples

This partial file holds color variables.

SASS

// _colors.scss
$primary-color: #3498db;

This partial file defines button styles using a variable from another partial.

SASS

// _buttons.scss
@use 'colors';

.button {
  background-color: colors.$primary-color;
  color: white;
  padding: 1rem;
}

The main file imports partials without the underscore and compiles them together.

SASS

// main.scss
@use 'colors';
@use 'buttons';

Sample Program

This example shows two partial files: one for colors and one for button styles. The main file imports both. Sass compiles all styles into one CSS file without creating separate CSS files for the partials.

SASS

// _colors.scss
$primary-color: #3498db;

// _buttons.scss
@use 'colors';
.button {
  background-color: colors.$primary-color;
  color: white;
  padding: 1rem;
  border-radius: 0.5rem;
}

// main.scss
@use 'colors';
@use 'buttons';

Important Notes

Always start partial filenames with an underscore (_) to mark them as partials.

Partial files are not compiled alone; they must be imported into a main Sass file.

Use @use or @import (deprecated) to include partials in your main file.

Summary

Partial files start with an underscore to avoid generating separate CSS files.

They help organize and reuse styles efficiently.

Import partials into main Sass files to compile all styles together.