SASS Nesting and Selectors 3

Question 1

What is a potential downside of deep Sass nesting?

Accepted Answer

It generates overly specific CSS selectors that are hard to override

Answer

Deep nesting results in high-specificity selectors like `.a .b .c .d`, which are difficult to override without `!important`.

Question 2

How do you apply a style to an element only when it has a specific class using `&` in Sass?

Accepted Answer

`.element { &.active { color: red; } }`

Answer

Writing `&.active` without a space chains the class to the parent, selecting elements with both classes.

Question 3

What does `@at-root (without: media)` do in Sass?

Accepted Answer

Emits the rule at the root without wrapping it in the media query

Answer

The `@at-root (without: media)` option emits styles at the root while excluding them from any enclosing media query.

Question 4

Which of the following correctly uses a Sass placeholder selector?

Accepted Answer

%btn { padding: 10px; } .primary { @extend %btn; }

Answer

Placeholder selectors are defined with `%` and applied using `@extend`, generating shared CSS blocks.

Question 5

How do you apply styles only when an element is the first child using `&` in Sass?

Accepted Answer

`.element { &:first-child { } }`

Answer

Combining `&` with `:first-child` in Sass nesting produces `.element:first-child` in the CSS output.

SASS Practice Test