Property nesting for related styles in SASS - Mini Project: Build & Apply

Selector Nesting for Related Styles in Sass

📖 Scenario: You are creating a simple webpage with a navigation menu. The menu has a main container and several links inside it. You want to style the menu and its links using Sass, keeping related styles grouped together for clarity and easier maintenance.

🎯 Goal: Build a Sass stylesheet that uses selector nesting to style a navigation menu container with a background color and padding, and style the links inside it with color and hover effects. The nested styles should be inside the main container style block.

📋 What You'll Learn

Create a Sass variable $nav-bg-color with the value #333.

Create a style block for a class .nav-menu with background color and padding.

Nest the styles for a links inside .nav-menu using selector nesting.

Inside the nested a styles, set the text color and add a hover effect that changes the color.

💡 Why This Matters

🌍 Real World

Web developers often use Sass nesting to keep related styles together, making CSS easier to read and maintain.

💼 Career

Knowing how to use Sass nesting is a valuable skill for frontend developers working on scalable and organized stylesheets.

1

Create the Sass variable for background color

Create a Sass variable called $nav-bg-color and set it to the color #333.

SASS

// Create the variable $nav-bg-color and set it to #333
// Your code here

Need a hint?

Use the $ symbol to create a variable in Sass.

2

Add styles for the navigation menu container

Create a style block for the class .nav-menu. Inside it, set background-color to $nav-bg-color and padding to 1rem.

SASS

$nav-bg-color: #333;

// Add styles for .nav-menu with background-color and padding
// Your code here

Need a hint?

Use .nav-menu { ... } to create the style block.

3

Nest styles for links inside the navigation menu

Inside the .nav-menu style block, nest a style block for a links. Set the color property to #fff.

SASS

$nav-bg-color: #333;

.nav-menu {
  background-color: $nav-bg-color;
  padding: 1rem;
  
  // Nest styles for a links here
  // Your code here
}

Need a hint?

Indent the a block inside .nav-menu to nest it.

4

Add hover effect to the nested links

Inside the nested a block, add a nested :hover style that changes the color to #ff0.

SASS

$nav-bg-color: #333;

.nav-menu {
  background-color: $nav-bg-color;
  padding: 1rem;

  a {
    color: #fff;
    
    // Add :hover style here
    // Your code here
  }
}

Need a hint?

Use &:hover inside the a block to nest the hover style.