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:<br>

button {<br>  &:hover {<br>    color: red;<br>  }<br>}

<br>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:<br>

.btn {<br>  &-primary {<br>    background: blue;<br>  }<br>}

<br>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:<br>

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

<br>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?<br>

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

A .nav li { color: red; }

B li &gt; .nav { color: red; }

C .nav &gt; li { color: red; }

D .nav &gt; .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.