Basic selector nesting in SASS - Mini Project: Build & Apply

Basic Selector Nesting with Sass

📖 Scenario: You are creating a simple webpage with a navigation menu. You want to style the menu and its items using Sass. To keep your styles organized and easy to maintain, you will use basic selector nesting.

🎯 Goal: Build a Sass stylesheet that styles a <nav> element with a class menu and its nested <ul> and <li> elements using nested selectors.

📋 What You'll Learn

Create a Sass variable for the main menu background color.

Nest the ul selector inside the .menu selector.

Nest the li selector inside the ul selector.

Add a hover style for the li elements nested inside ul.

💡 Why This Matters

🌍 Real World

Web developers often use Sass nesting to organize styles for components like menus, making code easier to read and maintain.

💼 Career

Knowing Sass nesting is valuable for front-end developers working on modern websites and applications to write scalable CSS.

1

Create the main menu background color variable

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

SASS

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

Need a hint?

Use the $ symbol to create a variable in Sass.

2

Nest the ul selector inside the .menu selector

Write a Sass rule for the class selector .menu. Inside it, nest the ul selector. Set the background color of .menu to $menu-bg-color.

SASS

$menu-bg-color: #3498db;

.menu {
  /* Nest ul selector here */
  // Your code here
}

Need a hint?

Use nesting by writing the ul selector inside the .menu block.

3

Nest the li selector inside the ul selector

Inside the nested ul selector, nest the li selector. Set the li elements to have a padding of 1rem.

SASS

$menu-bg-color: #3498db;

.menu {
  background-color: $menu-bg-color;
  ul {
    /* Nest li selector here */
    // Your code here
  }
}

Need a hint?

Remember to nest li inside ul by writing it inside the ul block.

4

Add a hover style for the li elements

Inside the nested li selector, add a nested :hover selector. Set the background color on hover to #2980b9.

SASS

$menu-bg-color: #3498db;

.menu {
  background-color: $menu-bg-color;
  ul {
    li {
      padding: 1rem;
      /* Add :hover style here */
      // Your code here
    }
  }
}

Need a hint?

Use &:hover to nest the hover state inside the li selector.