Why Partial files with underscore prefix in SASS? - Purpose & Use Cases

The Big Idea

Discover how a tiny underscore can save you hours of messy style updates!

The Scenario

Imagine you have a big style sheet for your website. You want to organize it by splitting styles into smaller files, but you have to manually copy and paste parts into one main file every time you make a change.

The Problem

This manual copying is slow and easy to forget. If you miss copying a file or make a typo, your styles break. It's hard to keep track of which parts belong where, and updating styles becomes a mess.

The Solution

Partial files with an underscore prefix let you split your styles into smaller pieces that Sass knows not to compile alone. Instead, you import them into a main file, so you only compile once, and all parts combine automatically.

Before vs After

✗ Before

@import 'buttons.scss';
@import 'header.scss';
// Regular .scss files compile individually to separate CSS files if run directly.

✓ After

@import 'buttons';
@import 'header';
// Sass combines partials starting with underscore automatically into one CSS file.

What It Enables

You can organize styles cleanly in many small files and compile them all at once without errors or extra work.

Real Life Example

A web designer splits styles into _buttons.scss, _header.scss, and _footer.scss. They import these partials into main.scss. When they change a button style, they only update _buttons.scss and recompile main.scss to see the update instantly.

Key Takeaways

Partial files start with an underscore and are not compiled alone.

They help organize styles into smaller, manageable pieces.

Importing partials into a main file compiles all styles together automatically.