Avoiding over-nesting in SASS - Mini Project: Build & Apply

Avoiding Over-Nesting in Sass

📖 Scenario: You are styling a simple webpage with a navigation menu and some content sections. You want to write clean and easy-to-read Sass code without nesting selectors too deeply.

🎯 Goal: Write Sass code that styles a navigation bar and content sections using nesting but avoid over-nesting beyond two levels to keep the code simple and maintainable.

📋 What You'll Learn

Create a Sass variable for the main color

Use nesting up to two levels only

Style the navigation bar background and links

Style the content section background and headings

Avoid nesting selectors more than two levels deep

💡 Why This Matters

🌍 Real World

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

💼 Career

Front-end developers often use Sass to write scalable stylesheets. Avoiding over-nesting is a best practice that improves code quality and teamwork.

1

Create a Sass variable for the main color

Create a Sass variable called $main-color and set it to #3498db.

SASS

// Create a Sass variable called $main-color and set it to #3498db
// Your code here

Need a hint?

Use the $ symbol to create a variable in Sass.

2

Style the navigation bar background and links with nesting

Write Sass code to style a nav element with a background color of $main-color. Inside nav, style a links to have white text color and no underline. Use nesting up to two levels only.

SASS

$main-color: #3498db;

// Style nav background and links with nesting
// Your code here

Need a hint?

Use nesting inside nav to style a links.

3

Style the content section background and headings with nesting

Write Sass code to style a .content class with a light gray background color #f0f0f0. Inside .content, style h2 headings to have the color $main-color. Use nesting up to two levels only.

SASS

$main-color: #3498db;

nav {
  background-color: $main-color;
  a {
    color: white;
    text-decoration: none;
  }
}

// Style .content background and h2 headings with nesting
// Your code here

Need a hint?

Use nesting inside .content to style h2 headings.

4

Avoid over-nesting by not nesting more than two levels

Ensure your Sass code does not nest selectors more than two levels deep anywhere. For example, do not nest ul inside nav inside another selector. Add a style for ul inside nav with padding: 0; using only two levels of nesting.

SASS

$main-color: #3498db;

nav {
  background-color: $main-color;
  a {
    color: white;
    text-decoration: none;
  }
}

.content {
  background-color: #f0f0f0;
  h2 {
    color: $main-color;
  }
}

// Add ul style inside nav with padding: 0; without over-nesting
// Your code here

Need a hint?

Keep nesting inside nav only two levels deep by adding ul alongside a.