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.

Practice

1. What is the main purpose of starting a Sass file name with an underscore (e.g., _variables.scss)?

easy

A. To mark it as a partial file that won't compile to a separate CSS file

B. To make the file load faster in the browser

C. To indicate the file contains only variables

D. To hide the file from the Sass compiler

Solution

1. Step 1: Understand Sass partial naming

   Files starting with an underscore are called partials and are not compiled into separate CSS files.

2. Step 2: Purpose of partial files

   They are meant to be imported into other Sass files to organize code without creating extra CSS files.

3. Final Answer:

   To mark it as a partial file that won't compile to a separate CSS file -> Option A

4. Quick Check:

   Partial files start with underscore = no separate CSS file [OK]

Hint: Underscore means partial, no separate CSS file generated [OK]

Common Mistakes:

• Thinking underscore hides the file from compiler
• Assuming underscore means only variables inside
• Believing underscore speeds up browser loading

2. Which of the following is the correct way to import a partial Sass file named _mixins.scss into another Sass file?

easy

A. @import _mixins.scss;

B. ;sscs.snixim_ tropmi@

C. @import 'mixins';

D. @import mixins.scss;

Solution

1. Step 1: Understand import syntax for partials

   When importing partials, omit the underscore and file extension.

2. Step 2: Apply correct import format

   So to import _mixins.scss, write @import 'mixins'; without underscore or extension.

3. Final Answer:

   @import 'mixins'; -> Option C

4. Quick Check:

   Import partials without underscore or extension [OK]

Hint: Import partials without underscore or .scss extension [OK]

Common Mistakes:

• Including underscore in import path
• Adding .scss extension in import
• Using incorrect quotes or syntax

3. Given these files:
_colors.scss contains:

$primary-color: blue;

main.scss contains:

@import 'colors';
body { color: $primary-color; }

What will be the color of the text in the compiled CSS?

medium

A. red

B. blue

C. black

D. Error: Undefined variable

Solution

1. Step 1: Check variable definition in partial

   The _colors.scss file defines $primary-color: blue;.

2. Step 2: Confirm import and usage in main.scss

   Main file imports colors partial and uses $primary-color in body color.

3. Final Answer:

   blue -> Option B

4. Quick Check:

   Imported variable used correctly = blue text [OK]

Hint: Imported variables from partials are usable in main file [OK]

Common Mistakes:

• Forgetting to import partial
• Using variable before import
• Expecting partial to generate separate CSS

4. You have a partial file named _buttons.scss but when you compile your main Sass file, styles from _buttons.scss are missing. What is the most likely cause?

medium

A. You need to rename the file to buttons.css

B. The partial file name should not start with an underscore

C. Sass does not support partial files

D. You forgot to import buttons partial in the main Sass file

Solution

1. Step 1: Check partial file naming

   Partial files must start with underscore; _buttons.scss is correct.

2. Step 2: Verify import statement in main file

   If styles are missing, likely the partial was not imported using @import 'buttons';.

3. Final Answer:

   You forgot to import buttons partial in the main Sass file -> Option D

4. Quick Check:

   Missing import = missing styles [OK]

Hint: Always import partials in main file to include their styles [OK]

Common Mistakes:

• Removing underscore from partial filename
• Expecting partials to compile alone
• Renaming partial to .css instead of .scss

5. You want to organize your Sass project with multiple partials: _reset.scss, _typography.scss, and _layout.scss. How should you structure your main Sass file to compile all styles into one CSS file?

hard

A. @import 'reset';
@import 'typography';
@import 'layout';

B. @import _reset.scss;
@import _typography.scss;
@import _layout.scss;

C. @import reset.scss;
@import typography.scss;
@import layout.scss;

D. @import 'reset' 'typography' 'layout';

Solution

1. Step 1: Understand import syntax for multiple partials

   Each partial is imported separately without underscore or extension.

2. Step 2: Write imports correctly in main file

   Use separate @import statements for each partial: @import 'reset';, @import 'typography';, @import 'layout';.

3. Final Answer:

   @import 'reset'; @import 'typography'; @import 'layout'; -> Option A

4. Quick Check:

   Separate imports without underscore or extension [OK]

Hint: Import each partial separately without underscore or .scss [OK]

Common Mistakes:

• Including underscore or .scss in import
• Trying to import multiple files in one statement with commas
• Renaming partials to .css files