Partial files with underscore prefix in SASS - Mini Project: Build & Apply

Using Partial Files with Underscore Prefix in Sass

📖 Scenario: You are building a simple website style using Sass. To keep your styles organized, you want to split your CSS into smaller files called partials. These partial files start with an underscore and are imported into a main Sass file.

🎯 Goal: Create a Sass project where you define variables in a partial file with an underscore prefix, then import that partial into a main Sass file and use the variables to style a heading.

📋 What You'll Learn

Create a partial Sass file named _variables.scss with color variables.

Create a main Sass file named style.scss that imports the partial.

Use the imported variables to style an h1 heading.

Ensure the partial file is not compiled directly but included via import.

💡 Why This Matters

🌍 Real World

Organizing CSS styles into partial Sass files helps keep large projects clean and maintainable, making it easier to update colors, fonts, or layouts in one place.

💼 Career

Many front-end developer roles require knowledge of Sass partials and modular CSS to build scalable and maintainable stylesheets.

1

Create the partial file _variables.scss with color variables

Create a partial Sass file named _variables.scss and inside it define two variables: $primary-color set to #3498db and $secondary-color set to #2ecc71.

SASS

// Your code here

Hint

Remember to start the file name with an underscore to make it a partial file.

2

Create the main Sass file style.scss and import the partial

Create a Sass file named style.scss and add an import statement to include the partial _variables.scss using @import 'variables';.

SASS

// Add the import statement below
// Your code here

Hint

Do not include the underscore or file extension in the import statement.

3

Use the imported variables to style an h1 heading

In style.scss, add a style rule for h1 that sets the color property to $primary-color and the background-color property to $secondary-color.

SASS

@import 'variables';

// Add h1 style rule below
// Your code here

Hint

Use the variables exactly as they are named.

4

Complete the Sass setup ensuring partial is used correctly

Make sure the partial file _variables.scss is not compiled directly and that style.scss imports it correctly. Confirm the final style.scss includes the import and the h1 styles.

SASS

@import 'variables';

h1 {
  color: $primary-color;
  background-color: $secondary-color;
}

// Verify partial usage and import correctness
// Your code here

Hint

The partial file should not be compiled alone. Only style.scss is compiled.

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