Partial files with underscore prefix in SASS - Browser Rendering Trace

Render Flow - Partial files with underscore prefix

Read main.scss

↓

Find @use or @import statement

↓

Look for partial file _variables.scss

↓

Load _variables.scss content

↓

Compile combined CSS

↓

Output final CSS file

The Sass compiler reads the main file, finds import or use statements referencing partial files with an underscore prefix, loads their content without generating separate CSS, then compiles everything into one CSS output.

Render Steps - 3 Steps

Code Added:// _variables.scss $bg-color: #f0f0f0;

Before

[No CSS variables defined]

[No background color applied]

→

After

[Variable $bg-color defined with value #f0f0f0]

[No visible change yet]

The partial file _variables.scss defines a color variable but does not produce CSS output by itself.

🔧 Browser Action:Sass compiler stores variable in memory, no CSS output generated

Code Sample

This Sass code uses a partial file named _variables.scss to define a color variable, then applies it in the main.scss file to set the background color.

SASS

// main.scss
@use 'variables';

body {
  background-color: variables.$bg-color;
}

// _variables.scss
$bg-color: #f0f0f0;

Render Quiz - 3 Questions

After step 2, what is true about the variables from _variables.scss?

A They are accessible in main.scss with the namespace 'variables'

B They are compiled into a separate CSS file

C They are not available until step 3

D They automatically apply styles to the body element

Common Confusions - 3 Topics

Why doesn't _variables.scss generate its own CSS file?

Partial files with an underscore prefix are not compiled into separate CSS files. They only provide code to be included in other Sass files.

💡 Files starting with _ are like helpers, not standalone styles.

What happens if I forget the underscore in the partial filename?

Sass treats files without underscore as normal files and compiles them separately, which can cause duplicate or unwanted CSS output.

💡 Always prefix partial files with _ to avoid extra CSS files.

Why can't I use variables from a partial without @use or @import?

Variables in partials are only available when you explicitly import or use the partial in your main Sass file.

💡 Import partials to access their variables and mixins.

Property Reference

Feature	Description	Effect on CSS Output	Common Use
Partial file (underscore prefix)	Sass file starting with _	Not compiled to separate CSS	Organize reusable code
@use	Imports partial with namespace	Variables/functions accessible with namespace	Modular Sass code
@import	Legacy import method	Imports partial content inline	Older Sass projects
Variable	$name: value;	Defines reusable value	Consistent styling

Concept Snapshot

Partial files in Sass start with an underscore (_) to mark them as helpers. They are not compiled into separate CSS files. Use @use or @import in main files to include partials. Variables and mixins in partials become available only after importing. This helps organize and reuse Sass code without extra CSS output.

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