First SASS stylesheet - Mini Project: Build & Apply

First SASS Stylesheet

📖 Scenario: You are creating a simple webpage style using SASS to make your CSS easier to manage and read.

🎯 Goal: Build a SASS stylesheet that defines a color variable, uses it for a background color, and styles a heading with a font size and color.

📋 What You'll Learn

Create a SASS variable for a primary color

Use the variable to set the background color of the body

Style an h1 heading with a font size and color

Use nested syntax to style the h1 inside the body

💡 Why This Matters

🌍 Real World

SASS is used in real websites to write CSS faster and keep styles organized.

💼 Career

Knowing SASS is valuable for front-end developers to maintain large style codebases efficiently.

1

Create a SASS variable for the primary color

Write a SASS variable called $primary-color and set it to #3498db.

SASS

// Your code here

Need a hint?

Variables in SASS start with a dollar sign $.

2

Set the body background color using the variable

Write a body selector and set its background-color property to the $primary-color variable.

SASS

$primary-color: #3498db;

// Your code here

Need a hint?

Use the variable by writing its name with the dollar sign inside the property value.

3

Add styles for the h1 inside the body using nesting

Inside the body selector, nest an h1 selector. Set its font-size to 2rem and color to white.

SASS

$primary-color: #3498db;

body {
  background-color: $primary-color;
  // Your code here
}

Need a hint?

Use nested syntax by writing the h1 selector inside the body block.

4

Complete the SASS stylesheet

Make sure the SASS code includes the $primary-color variable, the body selector with background-color, and the nested h1 with font-size and color properties.

SASS

$primary-color: #3498db;

body {
  background-color: $primary-color;
  h1 {
    font-size: 2rem;
    color: white;
  }
}
// Your code here if needed

Need a hint?

Review your code to ensure all parts are included exactly as instructed.