Parent selector with & in SASS - Mini Project: Build & Apply

Using the Parent Selector & in Sass

📖 Scenario: You are creating a simple webpage with a button. You want to style the button and also style the button when it is hovered over. To keep your styles organized, you will use Sass and the parent selector & to write nested styles.

🎯 Goal: Build a Sass stylesheet that styles a button with a blue background and white text. When the user hovers over the button, the background should change to dark blue. Use the parent selector & to nest the hover style inside the button style.

📋 What You'll Learn

Create a Sass class called .btn with a blue background and white text color.

Add a nested hover style inside .btn using the parent selector &.

The hover style changes the background color to dark blue.

Use proper nesting and the & selector in Sass.

💡 Why This Matters

🌍 Real World

Buttons are common on websites and apps. Using Sass nesting with & helps keep styles organized and maintainable.

💼 Career

Front-end developers often use Sass to write cleaner CSS. Knowing how to use & for nesting is a key skill for styling interactive elements.

1

Create the base button style

Create a Sass class called .btn that sets the background color to #007BFF (blue) and the text color to #FFFFFF (white).

SASS

.btn {
  // Your code here
}

Hint

Use background-color and color properties inside the .btn class.

2

Add the hover state configuration

Add a nested style inside the .btn class using the parent selector & to target the hover state with :hover. Just add the selector line &:hover inside .btn.

SASS

.btn {
  background-color: #007BFF;
  color: #FFFFFF;
  // Add &:hover selector here
}

Hint

Use &:hover inside .btn to start the hover style.

3

Set the hover background color

Inside the nested &:hover selector, set the background color to #0056b3 (dark blue).

SASS

.btn {
  background-color: #007BFF;
  color: #FFFFFF;
  &:hover {
    // Set background color here
  }
}

Hint

Inside &:hover, write background-color: #0056b3;.

4

Complete the Sass with proper nesting

Make sure the entire Sass code has the .btn class with nested &:hover selector and the correct background colors and text color as specified.

SASS

.btn {
  background-color: #007BFF;
  color: #FFFFFF;
  &:hover {
    background-color: #0056b3;
  }
  // Final check
}

Hint

Review your code to ensure all parts are nested correctly and colors match.

Practice

1. What does the & symbol represent in Sass when used inside nested selectors?

easy

A. It resets all styles to default.

B. It creates a new global selector.

C. It refers to the current parent selector.

D. It comments out the nested block.

Solution

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

   The & symbol is used to refer back to the parent selector in nested Sass code.

2. Step 2: Identify what & does in the context

   It helps avoid repeating the parent selector by representing it directly.

3. Final Answer:

   It refers to the current parent selector. -> Option C

4. Quick Check:

   & means parent selector [OK]

Hint: Remember & means "this parent" selector in Sass [OK]

Common Mistakes:

• Thinking & creates a new selector
• Confusing & with a comment symbol
• Assuming & resets styles

2. Which of the following is the correct Sass syntax to style a button with a hover effect using the parent selector &?

easy

A. button {
&hover {
color: red;
}
}

B. button {
& :hover {
color: red;
}
}

C. button {
&:hover() {
color: red;
}
}

D. button {
&:hover {
color: red;
}
}

Solution

1. Step 1: Check the correct pseudo-class syntax with &

   The correct way to use & with a pseudo-class is &:hover without spaces or parentheses.

2. Step 2: Identify the valid Sass nesting syntax

   button { &:hover { color: red; } } uses &:hover correctly inside the button block.

3. Final Answer:

   button { &:hover { color: red; } } -> Option D

4. Quick Check:

   Use &:pseudo-class with no spaces [OK]

Hint: Use &:hover with no space or parentheses [OK]

Common Mistakes:

• Adding parentheses after pseudo-class
• Leaving space between & and pseudo-class
• Writing &hover instead of &:hover

3. Given the Sass code:

nav {
  &.active {
    color: blue;
  }
  ul & {
    margin: 0;
  }
}

Which CSS selectors will be generated?

medium

A. nav.active { color: blue; }
ul nav { margin: 0; }

B. nav .active { color: blue; }
ul nav { margin: 0; }

C. nav.active { color: blue; }
ul & { margin: 0; }

D. nav.active { color: blue; }
ul nav.active { margin: 0; }

Solution

1. Step 1: Understand &.active usage

   The & refers to nav, so &.active becomes nav.active.

2. Step 2: Understand ul & usage

   This means ul nav, because & is replaced by nav but placed after ul.

3. Final Answer:

   nav.active { color: blue; } and ul nav { margin: 0; } -> Option A

4. Quick Check:

   & replaces parent selector exactly [OK]

Hint: Replace & with parent selector exactly where placed [OK]

Common Mistakes:

• Assuming & always prefixes the selector
• Confusing space placement around &
• Treating & as a separate selector

4. Identify the error in this Sass code snippet:

.card {
  & .title {
    font-weight: bold;
  }
  &.highlight {
    background: yellow;
  }
  &hover {
    color: red;
  }
}

medium

A. Missing colon in &:hover pseudo-class

B. Incorrect space after & in & .title

C. Cannot use & with class selectors

D. Background property is invalid

Solution

1. Step 1: Check each & usage

   & .title is valid for child selector, &.highlight is valid for combined class.

2. Step 2: Identify incorrect pseudo-class syntax

   &hover is missing the colon and should be &:hover.

3. Final Answer:

   Missing colon in &:hover pseudo-class -> Option A

4. Quick Check:

   Pseudo-classes need colon after & [OK]

Hint: Pseudo-classes need &: not & alone [OK]

Common Mistakes:

• Forgetting colon before pseudo-class
• Thinking space after & is always wrong
• Assuming & can't combine with classes

5. You want to style a list where the li elements inside a ul have a special style only when the ul has a class highlight. Which Sass code using & correctly achieves this?

hard

A. ul.highlight {
li & {
color: green;
}
}

B. ul {
&.highlight li {
color: green;
}
}

C. ul {
li {
&.highlight {
color: green;
}
}
}

D. ul {
& li.highlight {
color: green;
}
}

Solution

1. Step 1: Understand the selector goal

   We want to style li inside ul.highlight, so the selector is ul.highlight li.

2. Step 2: Check which Sass code produces that selector

   ul { &.highlight li { color: green; } } nests &.highlight li inside ul, so & becomes ul, resulting in ul.highlight li.

3. Final Answer:

   ul { &.highlight li { color: green; } } -> Option B

4. Quick Check:

   & replaces parent selector exactly where placed [OK]

Hint: Place & where parent selector should appear in nested code [OK]

Common Mistakes:

• Misplacing & causing wrong selector order
• Trying to put & inside child selector
• Confusing class placement on li instead of ul