SASS Nesting and Selectors 2 — Questions and Answers
Question 1: What does the `@at-root` directive do in Sass?
- Emits styles at the root of the document instead of inside the parent selector (Correct answer)
- Resets all parent styles
- Creates a new stylesheet scope
- Imports a file at the root level
Correct answer: Emits styles at the root of the document instead of inside the parent selector
The `@at-root` directive makes nested rules emit at the document root rather than nested inside the parent.
Question 2: Which selector operator in Sass nesting produces a child combinator (`>`)?
- Writing `> .child` inside the parent block (Correct answer)
- Using `child(.child)`
- Using `&child`
- Writing `>> .child`
Correct answer: Writing `> .child` inside the parent block
You can write `> .child` inside a parent block to produce a child combinator in Sass.
Question 3: What happens when you use `&` at the end of a selector in Sass, e.g., `.no-js & { }`?
- It places the parent selector after `.no-js` (Correct answer)
- It creates an error
- It outputs the parent selector twice
- It ignores the `.no-js` prefix
Correct answer: It places the parent selector after `.no-js`
Placing `&` after another selector prepends that selector to the parent, useful for context-based overrides.
Question 4: Which Sass feature allows you to write modular, nested property declarations?
- Property nesting with namespace prefix (Correct answer)
- Variable scoping
- Placeholder selectors
- Function chaining
Correct answer: Property nesting with namespace prefix
Sass supports nesting CSS properties that share a namespace prefix like `font-`, `border-`, etc.
Question 5: In Sass, what does `%placeholder` define?
- A placeholder selector used with `@extend` but not output on its own (Correct answer)
- A variable placeholder
- An optional argument in a mixin
- A CSS custom property
Correct answer: A placeholder selector used with `@extend` but not output on its own
Placeholder selectors (`%name`) define reusable styles that are only output when extended, not on their own.
Question 6: What is the primary benefit of Sass nesting over plain CSS?
- It visually reflects the HTML structure and reduces selector repetition (Correct answer)
- It compiles faster
- It produces shorter class names
- It avoids the need for IDs
Correct answer: It visually reflects the HTML structure and reduces selector repetition
Sass nesting mirrors HTML hierarchy, reducing repetition and making stylesheets easier to read and maintain.
SASS Nesting and Selectors 2
What does the `@at-root` directive do in Sass?