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

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
}

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
  }
}

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
    }
  }
}

Hint

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

Practice

1. What does the & symbol represent in Sass nesting?

easy

A. The parent selector in the nested rule

B. A new CSS class

C. A CSS property

D. A comment in Sass

Solution

1. Step 1: Understand the role of & in Sass

   The & symbol is used inside nested selectors to refer to the parent selector.

2. Step 2: Apply this understanding to nesting

   When you nest selectors, & helps avoid repeating the parent selector by representing it directly.

3. Final Answer:

   The parent selector in the nested rule -> Option A

4. Quick Check:

   & means parent selector [OK]

Hint: Remember & means 'this selector' inside nesting [OK]

Common Mistakes:

• Thinking & creates a new class
• Confusing & with CSS properties
• Assuming & is a comment

2. Which of the following is the correct Sass syntax to nest a .button class inside a .container class?

easy

A. .container .button { color: blue; }

B. .container > .button { color: blue; }

C. .container { .button { color: blue; } }

D. .container, .button { color: blue; }

Solution

1. Step 1: Identify correct nesting syntax in Sass

   In Sass, nesting is done by placing the child selector inside the parent block using curly braces.

2. Step 2: Check each option

   .container { .button { color: blue; } } correctly nests .button inside .container using braces. Options B and C are plain CSS selectors, not Sass nesting. .container, .button { color: blue; } combines selectors incorrectly.

3. Final Answer:

   .container { .button { color: blue; } } -> Option C

4. Quick Check:

   Nested selectors use braces inside parent [OK]

Hint: Nesting means putting selector inside braces of parent [OK]

Common Mistakes:

• Using plain CSS selectors instead of nesting
• Combining selectors with commas incorrectly
• Missing curly braces for nesting

3. Given the Sass code:

.nav {
  ul {
    margin: 0;
    li {
      list-style: none;
    }
  }
}

What is the compiled CSS output?

medium

A. .nav { ul { margin: 0; } li { list-style: none; } }

B. .nav ul, .nav li { margin: 0; list-style: none; }

C. .nav ul li { margin: 0; list-style: none; }

D. .nav ul { margin: 0; } .nav ul li { list-style: none; }

Solution

1. Step 1: Understand nesting levels

   The ul is nested inside .nav, so the selector becomes .nav ul. The li is nested inside ul, so it becomes .nav ul li.

2. Step 2: Write the compiled CSS

   Each nested block compiles to a combined selector with all parents. Properties stay inside their respective selectors.

3. Final Answer:

   .nav ul { margin: 0; } .nav ul li { list-style: none; } -> Option D

4. Quick Check:

   Nesting combines selectors in order [OK]

Hint: Nested selectors combine parents in order [OK]

Common Mistakes:

• Leaving nested selectors inside braces in output
• Combining properties incorrectly
• Using commas instead of nesting

4. Identify the error in this Sass code:

.card {
  &.active {
    background: green;
  }
  .title {
    font-weight: bold;
  }
  & .subtitle {
    font-size: 1.2rem;
  }
}

medium

A. Missing semicolon after font-weight: bold.

B. The selector & .subtitle adds an unwanted space, changing meaning.

C. Cannot use & with class selectors.

D. Nesting .title inside .card is invalid.

Solution

1. Step 1: Analyze the & .subtitle selector

   The space after & means it selects .card .subtitle. This is different from &.subtitle which selects .card.subtitle.

2. Step 2: Check other parts for errors

   Semicolons are present, & usage with classes is valid, and nesting .title inside .card is correct.

3. Final Answer:

   The selector & .subtitle adds an unwanted space, changing meaning. -> Option B

4. Quick Check:

   Space after & changes selector meaning [OK]

Hint: No space after & means same element, space means child [OK]

Common Mistakes:

• Adding space after & when not intended
• Thinking & cannot be combined with classes
• Missing semicolons (but they are present here)

5. You want to style a button inside a .card only when the card is .active. Which Sass nesting produces the correct CSS selector .card.active button?

hard

A. .card {
&.active {
button {
color: red;
}
}
}

B. .card {
button {
&.active {
color: red;
}
}
}

C. .card {
& button.active {
color: red;
}
}

D. .card.active {
&button {
color: red;
}
}

Solution

1. Step 1: Understand the target selector

   The selector .card.active button means a button inside a .card that also has the .active class.

2. Step 2: Check nesting structure

   .card { &.active { button { color: red; } } } nests button inside &.active inside .card, producing .card.active button. Other options either place .active on the button or use incorrect nesting.

3. Final Answer:

   .card { &.active { button { color: red; } } } -> Option A

4. Quick Check:

   Nesting &.active then button matches .card.active button [OK]

Hint: Nest &.active first, then button inside for correct selector [OK]

Common Mistakes:

• Placing .active on button instead of card
• Using & with space incorrectly
• Not nesting button inside &.active