Why Parent selector with & in SASS? - Purpose & Use Cases

The Big Idea

Discover how a single symbol can save you from endless copying and pasting in your styles!

The Scenario

Imagine you want to style a button and its hover state. You write separate CSS rules for .button and .button:hover manually.

The Problem

Writing separate selectors means repeating the parent class name each time. If you rename the parent class, you must update every related selector manually, which is slow and error-prone.

The Solution

The parent selector & in Sass lets you nest styles and refer to the parent selector automatically. This keeps your code DRY and easier to maintain.

Before vs After

✗ Before

.button { color: blue; }
.button:hover { color: red; }

✓ After

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

What It Enables

You can write cleaner, nested styles that automatically link to the parent selector, making your CSS easier to read and update.

Real Life Example

When styling a navigation menu, you can nest hover and active states inside the main menu item style using &, so all related styles stay grouped and consistent.

Key Takeaways

Manually repeating selectors is tedious and error-prone.

The & parent selector lets you nest and reuse the parent selector easily.

This leads to cleaner, maintainable, and DRY CSS code.

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