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.