SASS Nesting and Selectors

Question 1

What does the `&` symbol represent in Sass nesting?

Accepted Answer

The parent selector

Answer

A universal selector

Answer

An ID selector

Answer

A child combinator

Question 2

What is the compiled CSS output of `.button { &:hover { color: red; } }`?

Accepted Answer

.button:hover { color: red; }

Answer

.button .hover { color: red; }

Answer

.button > :hover { color: red; }

Answer

button:hover { color: red; }

Question 3

How deep should Sass nesting ideally go to maintain readable CSS?

Accepted Answer

No more than 3 levels

Answer

As deep as needed

Answer

No more than 10 levels

Answer

Exactly 5 levels

Question 4

Which Sass feature allows you to nest `@media` queries inside selectors?

Accepted Answer

Nested `@media` directives

Answer

Inline media queries

Answer

Responsive mixins

Answer

`@include media`

Question 5

What does the following Sass produce: `.parent { .child { color: blue; } }`?

Accepted Answer

.parent .child { color: blue; }

Answer

.parent > .child { color: blue; }

Answer

.parent.child { color: blue; }

Answer

.child { color: blue; }

Question 6

How do you use `&` to create a BEM modifier in Sass?

Accepted Answer

.block { &__element { } &--modifier { } }

Answer

.block { #element { } #modifier { } }

Answer

.block { .element { } .modifier { } }

Answer

.block { *element { } *modifier { } }