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

Need a 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

Need a 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

Need a 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

Need a hint?

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