Parent selector with & in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

What CSS selector does this Sass code produce?

Given the Sass code below, what is the resulting CSS selector for the nested rule?

SASS

.button {
  &-primary {
    color: blue;
  }
}

A .primary-button { color: blue; }

B .button-primary { color: blue; }

C .button .primary { color: blue; }

D .button > .primary { color: blue; }

💡 Hint

The & symbol represents the parent selector exactly as it is.

The & in Sass replaces itself with the parent selector. Here, &-primary becomes .button-primary.

❓ selector

intermediate

Which CSS selector is generated by this Sass snippet?

Look at this Sass code and choose the correct CSS selector it compiles to:

SASS

.nav {
  ul {
    &.active {
      font-weight: bold;
    }
  }
}

A .nav .ul.active { font-weight: bold; }

B .nav ul .active { font-weight: bold; }

C .nav ul > .active { font-weight: bold; }

D .nav ul.active { font-weight: bold; }

💡 Hint

The & replaces the parent selector exactly where it appears.

The & in &.active replaces the parent selector ul, so it becomes ul.active inside .nav.

📝 Syntax

advanced

What error does this Sass code cause?

Examine this Sass code and select the error it produces when compiled:

SASS

.card {
  &__header {
    color: red
  }
}

A SyntaxError: Missing semicolon after 'color: red'

B No error, compiles correctly

C RuntimeError: Undefined variable

D SyntaxError: Unexpected token '&'

💡 Hint

Check punctuation carefully in CSS properties.

The property 'color: red' is missing a semicolon at the end, causing a syntax error.

❓ rendering

advanced

What visual style will the button have?

Given this Sass code, what color will the button text be in the browser?

SASS

.btn {
  color: black;
  &--danger {
    color: red;
  }
}

A All buttons will have black text, including 'btn--danger'.

B The button with class 'btn--danger' will have black text.

C The button with class 'btn--danger' will have red text.

D The button with class 'btn--danger' will have blue text.

💡 Hint

Look at how the nested selector changes the class name and color.

The nested selector &--danger becomes .btn--danger, which sets color to red, overriding the base .btn color.

❓ accessibility

expert

How does using & in Sass help maintain accessibility in CSS?

Choose the best explanation of how the parent selector & can improve accessibility in CSS code:

A It helps create clear, consistent class names that assist screen readers in identifying elements.

B It automatically adds ARIA attributes to elements for better accessibility.

C It prevents keyboard navigation by nesting selectors deeply.

D It disables color contrast checks in CSS.

💡 Hint

Think about how naming conventions affect accessibility tools.

Using & helps create consistent class names, which can be referenced in ARIA labels or scripts, aiding screen readers and accessibility.