Nesting depth and best practices in SASS - Mini Project: Build & Apply

Nesting Depth and Best Practices in Sass

📖 Scenario: You are creating styles for a simple webpage with a navigation bar and content sections. You want to write clean and maintainable Sass code by controlling how deeply you nest selectors.

🎯 Goal: Build a Sass stylesheet that styles a navigation bar and content sections using nesting with a maximum depth of 2 levels. This will help keep your styles organized and easy to read.

📋 What You'll Learn

Create a Sass variable for the main color

Add a variable for the font size

Use nesting to style the navigation bar and its links with no more than 2 levels of nesting

Use nesting to style content sections and their headings with no more than 2 levels of nesting

💡 Why This Matters

🌍 Real World

Writing clean and maintainable Sass stylesheets is important for real websites to keep CSS organized and easy to update.

💼 Career

Front-end developers often use Sass to write scalable styles. Understanding nesting depth and best practices helps avoid messy CSS and improves teamwork.

1

Create Sass variables for colors and font size

Create a Sass variable called $main-color and set it to #3498db. Also create a variable called $font-size and set it to 1.2rem.

SASS

// Create variables for main color and font size
// Your code here

Need a hint?

Use $variable-name: value; syntax to create variables in Sass.

2

Style the navigation bar with nesting

Add styles for a nav element. Set its background color to $main-color and font size to $font-size. Inside nav, nest styles for a links to have white text color and no underline. Use no more than 2 levels of nesting.

SASS

$main-color: #3498db;
$font-size: 1.2rem;

// Add styles for nav and nested a links here
// Your code here

Need a hint?

Use nesting by placing a inside nav { } block with proper indentation.

3

Style content sections with headings using nesting

Add styles for a .content class. Set its padding to 1rem. Inside .content, nest styles for h2 headings to have color $main-color and margin bottom 0.5rem. Use no more than 2 levels of nesting.

SASS

$main-color: #3498db;
$font-size: 1.2rem;

nav {
  background-color: $main-color;
  font-size: $font-size;

  a {
    color: white;
    text-decoration: none;
  }
}

// Add styles for .content and nested h2 here
// Your code here

Need a hint?

Use nesting by placing h2 inside .content { } block with proper indentation.

4

Add a hover effect to navigation links with best nesting practice

Inside the nav a nested block, add a hover style using &:hover to change the link color to lighten($main-color, 20%). Keep nesting depth no more than 2 levels.

SASS

$main-color: #3498db;
$font-size: 1.2rem;

nav {
  background-color: $main-color;
  font-size: $font-size;

  a {
    color: white;
    text-decoration: none;
    // Add hover effect here
  }
}

.content {
  padding: 1rem;

  h2 {
    color: $main-color;
    margin-bottom: 0.5rem;
  }
}

Need a hint?

Use &:hover inside the a block to add hover styles without increasing nesting depth.