SASS Nesting and Selectors

Question 1

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

Accepted Answer

The parent selector

Answer

In Sass, `&` refers to the parent selector and is used to create compound selectors or pseudo-classes.

Question 2

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

Accepted Answer

.button:hover { color: red; }

Answer

Sass replaces `&` with the parent selector, producing `.button:hover` in the CSS output.

Question 3

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

Accepted Answer

No more than 3 levels

Answer

Best practice recommends limiting Sass nesting to 3 levels to avoid specificity issues and unreadable output.

Question 4

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

Accepted Answer

Nested `@media` directives

Answer

Sass supports nesting `@media` rules inside selectors, which are bubbled up to the top level in output.

Question 5

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

Accepted Answer

.parent .child { color: blue; }

Answer

Sass nesting compiles nested selectors into a descendant combinator in the CSS output.

SASS Practice Test