Parent selector with & in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the & symbol represent in Sass?

The & symbol represents the parent selector. It lets you refer back to the current selector inside nested styles.

beginner

How would you write a hover style for a button using the parent selector & in Sass?

You write it like this:

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

This means: when the button is hovered, change its color to red.

intermediate

Can you use <code>&</code> to create a modifier class like <code>.btn-primary</code> inside <code>.btn</code>?

Yes! You can write:

.btn {
  &-primary {
    background: blue;
  }
}

This creates a class .btn-primary with the styles inside.

intermediate

What happens if you use & inside a nested selector like .menu > li?

The & will be replaced by the full parent selector. For example:

.menu {
  > li {
    color: green;
  }
}

means .menu > li in CSS.

beginner

Why is using & helpful in writing Sass?

It helps keep your code DRY (Don't Repeat Yourself). You can write nested styles that relate to the parent without repeating the full selector. It makes your code cleaner and easier to maintain.

In Sass, what does &:hover inside a selector block do?

A Targets the hover state of the parent selector

B Creates a new unrelated selector

C Targets all child elements

D Removes the parent selector

&:hover means the hover state of the current parent selector.

How would you write a nested class .card-active inside .card using &?

A .card { &-active { ... } }

B .card { .active { ... } }

C .card-active { ... }

D .card { & .active { ... } }

Using &-active appends '-active' to the parent selector .card.

What will this Sass code compile to?

.nav { > li { color: red; } }

A .nav li { color: red; }

B li > .nav { color: red; }

C .nav > li { color: red; }

D .nav > .li { color: red; }

The > li means direct child li of .nav.

Can & be used multiple times inside nested selectors?

A Only if inside media queries

B No, only once per block

C Only in the root selector

D Yes, it always refers to the parent selector

& can be used multiple times and always means the parent selector.

Which of these is a benefit of using & in Sass?

A Automatically adds vendor prefixes

B Avoids repeating selectors and keeps code clean

C Removes the need for classes

D Makes CSS slower to load

& helps avoid repeating selectors and keeps your Sass code cleaner.

Explain how the parent selector & works in Sass and give an example of its use.

Think about how you write hover styles or modifier classes inside a main class.

Describe a situation where using & in Sass helps keep your code cleaner and easier to maintain.

Consider writing styles for buttons with hover and active states.

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