Partial files with underscore prefix in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a partial file in Sass?

A partial file in Sass is a file that starts with an underscore (_) and is meant to hold Sass code that you want to include in other Sass files. It won't be compiled into a separate CSS file on its own.

beginner

Why do Sass partial files start with an underscore?

The underscore tells Sass not to compile the file directly. Instead, it is used only when imported into other Sass files.

intermediate

How do you import a partial file in Sass?

You use the @use or @import rule without the underscore or file extension. For example, @use 'variables'; will import _variables.scss.

intermediate

What happens if you don't use an underscore for a Sass file you want to import?

If the file does not start with an underscore, Sass will compile it into its own CSS file, which might not be what you want if it's just a helper file.

beginner

Can you explain the benefit of using partial files in Sass projects?

Partial files help organize your styles into smaller, manageable pieces. They keep your code clean and reusable without creating extra CSS files.

What does the underscore (_) at the start of a Sass file name mean?

A The file is a partial and won't compile to CSS on its own

B The file is a CSS file

C The file is ignored by Sass

D The file is compiled twice

An underscore means the file is a partial and is only included when imported, so it doesn't compile separately.

How do you import a partial file named _colors.scss in Sass?

A @import '_colors';

B @use '_colors.scss';

C @import 'colors.scss';

D @use 'colors';

You import partials without the underscore or file extension using @use or @import.

What happens if you remove the underscore from a partial file name?

A It will cause an error

B It will be ignored by Sass

C It will compile into a separate CSS file

D It will merge with other files automatically

Without the underscore, Sass treats the file as a normal file and compiles it separately.

Why use partial files in Sass?

A To make CSS files larger

B To organize code and avoid extra CSS files

C To slow down compilation

D To avoid using variables

Partials help keep code organized and prevent creating many CSS files.

Which Sass rule is recommended for importing partials in modern Sass?

A @use

B @import

C @include

D @extend

@use is the modern recommended way to import partials, replacing @import.

Explain what a Sass partial file is and why it starts with an underscore.

Think about how Sass knows which files to compile and which to include only.

Describe how to import a partial file in Sass and what happens if you forget the underscore in the file name.

Focus on the import syntax and the effect of file naming on compilation.

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