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

It slows down the Sass compiler

Answer

It breaks CSS inheritance

Answer

It prevents media queries from working

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

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

Answer

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

Answer

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

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

Removes all media styles

Answer

Disables responsive design

Answer

Creates a media-query-free copy

Question 4

Which of the following correctly uses a Sass placeholder selector?

Accepted Answer

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

Answer

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

Answer

$btn: padding 10px; .primary { @include $btn; }

Answer

.btn { padding: 10px; } .primary { @copy .btn; }

Question 5

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

Accepted Answer

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

Answer

`.element { first-child { } }`

Answer

`.element { ::first { } }`

Answer

`.element { :nth(1) { } }`

Question 6

What CSS output does `.nav { & + & { margin-top: 10px; } }` produce?

Accepted Answer

.nav + .nav { margin-top: 10px; }

Answer

.nav .nav { margin-top: 10px; }

Answer

.nav > .nav { margin-top: 10px; }

Answer

.nav, .nav { margin-top: 10px; }