Partial files with underscore prefix in SASS - Performance & Optimization

Performance: Partial files with underscore prefix

MEDIUM IMPACT

This affects CSS build time and bundle size by controlling which Sass files are compiled directly.

Organizing Sass files to optimize CSS build and bundle size

SASS

@import 'buttons';
@import 'header';
// Using _buttons.scss and _header.scss as partials with underscore prefix

Only main Sass files compile to CSS; partials are included but not compiled separately.

📈 Performance GainReduces CSS bundle size by up to 50%, speeds up build and initial page render

Organizing Sass files to optimize CSS build and bundle size

SASS

@import 'buttons.scss';
@import 'header.scss';
// All Sass files compiled directly without partials

Compiling all Sass files directly causes redundant CSS output and larger bundle size.

📉 Performance CostIncreases CSS bundle size by 20-50%, blocks rendering longer during initial load

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Compiling all Sass files directly	N/A	N/A	High due to large CSS	[X] Bad
Using underscore-prefixed partials	N/A	N/A	Lower due to smaller CSS	[OK] Good

Rendering Pipeline

Sass partials with underscore prefix prevent direct CSS generation, reducing CSS file size and parsing time in the browser.

→Build Time

→Network Transfer

→Style Calculation

⚠️ BottleneckNetwork Transfer and Style Calculation due to large CSS files

Core Web Vital Affected

LCP

This affects CSS build time and bundle size by controlling which Sass files are compiled directly.

Optimization Tips

1Prefix Sass partial files with an underscore to prevent direct CSS compilation.

2Import partials into main Sass files to keep CSS bundle size small.

3Smaller CSS bundles improve page load speed and LCP.

Performance Quiz - 3 Questions

What is the main benefit of prefixing Sass partial files with an underscore?

A They load faster in the browser

B They are not compiled directly to CSS, reducing bundle size

C They enable CSS animations automatically

D They increase the number of DOM nodes

DevTools: Network

How to check: Open DevTools > Network tab, filter by CSS files, check total CSS size and load time.

What to look for: Look for smaller CSS file sizes and faster load times indicating partial usage.

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