Why nesting mirrors HTML structure in SASS - See It in Action

Why Nesting Mirrors HTML Structure in 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 read, you will use nesting in Sass, which mirrors the HTML structure of the menu.

🎯 Goal: Build a Sass stylesheet that uses nesting to style a navigation menu and its links, reflecting the HTML structure for clarity and maintainability.

📋 What You'll Learn

Create a Sass variable for the main menu background color.

Nest the styles for the menu items inside the main menu style block.

Nest the styles for the links inside the menu items block.

Add a hover effect for the links using nested syntax.

💡 Why This Matters

🌍 Real World

Web developers use Sass nesting to write CSS that is easier to read and maintain, especially for complex HTML structures like menus and forms.

💼 Career

Understanding Sass nesting helps you work efficiently in teams and maintain large stylesheets, a common requirement in front-end web development jobs.

1

Set up 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

Style the main menu using the background color variable

Create a style block for the nav.menu selector and set its background-color to the variable $menu-bg-color.

SASS

$menu-bg-color: #3498db;

// Style nav.menu with background color
// Your code here

Need a hint?

Use nav.menu { } to target the menu and set the background color inside.

3

Nest styles for menu items inside the main menu block

Inside the nav.menu block, nest a style block for ul.menu-items and set its padding to 0 and margin to 0.

SASS

$menu-bg-color: #3498db;

nav.menu {
  background-color: $menu-bg-color;
  // Nest ul.menu-items styles here
  // Your code here
}

Need a hint?

Use nesting by placing ul.menu-items { } inside nav.menu { }.

4

Nest styles for links inside menu items with hover effect

Inside the ul.menu-items block, nest a style block for li.menu-item a. Set the color to white and add a nested :hover style that changes the color to #f1c40f.

SASS

$menu-bg-color: #3498db;

nav.menu {
  background-color: $menu-bg-color;
  ul.menu-items {
    padding: 0;
    margin: 0;
    // Nest li.menu-item a styles here
    // Your code here
  }
}

Need a hint?

Use &:hover inside the li.menu-item a block to add hover styles.