Property nesting for related styles in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output CSS of this nested Sass code?

Given the following Sass code, what is the compiled CSS output?

SASS

$primary-color: #3498db;
.button {
  color: $primary-color;
  &:hover {
    color: darken($primary-color, 10%);
  }
  &.active {
    color: lighten($primary-color, 20%);
  }
}

A

.button {
  color: #3498db;
}
.button:hover {
  color: #3498db;
}
.button.active {
  color: #3498db;
}

B

.button {
  color: #3498db;
}
.button:hover {
  color: #85b9e6;
}
.button.active {
  color: #2a7abf;
}

C

.button {
  color: #3498db;
}
.button:hover {
  color: #2a7abf;
}
.button.active {
  color: #85b9e6;
}

D

.button {
  color: #3498db;
  &:hover {
    color: #2a7abf;
  }
  &.active {
    color: #85b9e6;
  }
}

💡 Hint

Look at how & is used to create related selectors and how color functions adjust the base color.

The & symbol in Sass refers to the parent selector. &:hover compiles to .button:hover and &.active compiles to .button.active. The darken and lighten functions adjust the base color accordingly.

❓ rendering

intermediate

How many CSS rules are generated from this Sass nesting?

Consider this Sass code snippet. How many distinct CSS rules will be generated after compilation? .card { border: 1px solid #ccc; .title { font-weight: bold; } &:hover { border-color: #999; } }

SASS

.card {
  border: 1px solid #ccc;
  .title {
    font-weight: bold;
  }
  &:hover {
    border-color: #999;
  }
}

A 2

B 1

C 4

D 3

💡 Hint

Count each unique selector generated by nesting and & usage.

The code generates three CSS rules: one for .card, one for .card .title, and one for .card:hover. So total 3 rules.

❓ selector

advanced

Which option correctly nests pseudo-elements with property nesting?

You want to style a button's ::before pseudo-element inside the button class using Sass nesting. Which option produces the correct CSS?

SASS

.button {
  color: blue;
  /* pseudo-element styling here */
}

A

.button {
  color: blue;
  &::before {
    content: '→';
  }
}

B

.button {
  color: blue;
  ::before {
    content: '→';
  }
}

C

.button::before {
  content: '→';
  color: blue;
}

D

.button {
  color: blue;
  &:before {
    content: '→';
  }
}

💡 Hint

Use & with the correct pseudo-element syntax.

In Sass, to nest pseudo-elements, you use & followed by the pseudo-element with double colons (::before). Option A correctly nests it. Option A uses single colon which is deprecated for pseudo-elements.

❓ accessibility

advanced

How to nest focus styles accessibly using Sass?

You want to add a visible focus outline to links inside a navigation bar using Sass nesting. Which option correctly applies an accessible focus style?

SASS

nav {
  a {
    color: black;
    /* focus style here */
  }
}

A

nav {
  a {
    color: black;
    &:focus {
      outline: 3px solid #005fcc;
      outline-offset: 2px;
    }
  }
}

B

nav {
  a {
    color: black;
    &:focus-visible {
      outline: 3px solid #005fcc;
      outline-offset: 2px;
    }
  }
}

C

nav {
  a {
    color: black;
    &:hover {
      outline: 3px solid #005fcc;
    }
  }
}

D

nav {
  a {
    color: black;
    &:active {
      outline: 3px solid #005fcc;
    }
  }
}

💡 Hint

Use the pseudo-class that shows focus only when keyboard navigation is used.

The :focus-visible pseudo-class applies styles only when focus is visible (usually keyboard focus), improving accessibility by not showing outlines on mouse clicks. Option B uses &:focus-visible correctly nested.

❓ layout

expert

What is the final computed margin for .container > .item when using this nested Sass?

Given this Sass code, what is the margin applied to .container > .item in the compiled CSS? .container { padding: 1rem; > .item { margin: 0.5rem; &.highlight { margin: 1rem; } } }

SASS

.container {
  padding: 1rem;
  > .item {
    margin: 0.5rem;
    &.highlight {
      margin: 1rem;
    }
  }
}

A 0.5rem

B 1rem

C 1.5rem

D 0rem

💡 Hint

The base margin applies to all .item children; the .highlight class overrides margin only when present.

The selector > .item applies margin: 0.5rem to all direct .item children of .container. The nested &.highlight applies margin: 1rem only if the .item also has the highlight class. So for a normal .item, margin is 0.5rem.

Practice

1. What is the main benefit of using property nesting in Sass?

easy

A. It groups related styles inside one block for better readability.

B. It automatically compiles CSS faster.

C. It removes the need for selectors in CSS.

D. It disables browser default styles.

Solution

1. Step 1: Understand the purpose of nesting

   Nesting groups related CSS rules inside one block, making the code easier to read and maintain.

2. Step 2: Compare options

   Only 'It groups related styles inside one block for better readability.' correctly describes this benefit. Other options describe unrelated or incorrect effects.

3. Final Answer:

   It groups related styles inside one block for better readability. -> Option A

4. Quick Check:

   Nesting groups styles = C [OK]

Hint: Nesting groups styles inside blocks for clarity [OK]

Common Mistakes:

• Thinking nesting speeds up CSS compilation
• Believing nesting removes selectors
• Assuming nesting disables default styles

2. Which of the following is the correct Sass syntax to nest a :hover style inside a button class?

easy

A. .button:hover { & { color: red; } }

B. .button { &:hover { color: red; } }

C. &.button { :hover { color: red; } }

D. .button { :hover & { color: red; } }

Solution

1. Step 1: Identify correct nesting syntax

   In Sass, & refers to the parent selector. To nest :hover, write .button { &:hover { ... } }.

2. Step 2: Check each option

   .button { &:hover { color: red; } } uses correct syntax. Others misuse & or place pseudo-class incorrectly.

3. Final Answer:

   .button { &:hover { color: red; } } -> Option B

4. Quick Check:

   Nesting with & before :hover = A [OK]

Hint: Use & before pseudo-class inside parent block [OK]

Common Mistakes:

• Placing & outside the parent selector
• Using :hover without & inside nesting
• Misplacing pseudo-class after &

3. Given the Sass code:

.card {
  background: white;
  &:hover {
    background: gray;
  }
  .title {
    font-weight: bold;
  }
}

What is the compiled CSS output?

medium

A. .card { background: white; } .card:hover { background: gray; } .card .title { font-weight: bold; }

B. .card { background: white; } &:hover { background: gray; } .title { font-weight: bold; }

C. .card { background: white; } .card:hover { background: gray; } .title { font-weight: bold; }

D. .card { background: white; } .card:hover { background: gray; } .card.title { font-weight: bold; }

Solution

1. Step 1: Understand nesting output

   The &:hover becomes .card:hover. The nested .title becomes .card .title.

2. Step 2: Match compiled CSS

   .card { background: white; } .card:hover { background: gray; } .card .title { font-weight: bold; } correctly shows all selectors expanded properly. Others miss the parent selector or combine incorrectly.

3. Final Answer:

   .card { background: white; } .card:hover { background: gray; } .card .title { font-weight: bold; } -> Option A

4. Quick Check:

   Nesting expands selectors fully = B [OK]

Hint: Nested selectors become parent + child in CSS [OK]

Common Mistakes:

• Forgetting to prepend parent selector to nested classes
• Leaving & in compiled CSS
• Combining classes without space incorrectly

4. Identify the error in this Sass code:

.nav {
  color: black;
  &:hover {
    color: blue;
  }
  &.active {
    color: red;
  }
  .item {
    font-size: 1rem;
  }
  &:item {
    font-weight: bold;
  }
}

medium

A. The nested .item selector should be outside the .nav block.

B. The &.active selector is incorrect and should be .active.

C. The &:hover pseudo-class is not allowed inside nesting.

D. The selector &:item is invalid and should be .item.

Solution

1. Step 1: Review each nested selector

   &:hover and &.active are valid. .item nested inside .nav is correct.

2. Step 2: Identify invalid selector

   &:item is invalid because :item is not a valid pseudo-class. It should be .item without &:.

3. Final Answer:

   The selector &:item is invalid and should be .item. -> Option D

4. Quick Check:

   Invalid pseudo-class &:item = A [OK]

Hint: Pseudo-classes start with :, classes with . [OK]

Common Mistakes:

• Using & with invalid pseudo-class
• Confusing class and pseudo-class syntax
• Moving nested selectors outside parent unnecessarily

5. You want to style a card component so that when hovered, its title text turns blue and the card background changes to light gray. Using property nesting, which Sass code achieves this correctly?

hard

A. .card {
background: white;
&:hover {
.title {
background: lightgray;
color: blue;
}
}
.title {
color: black;
}
}

B. .card {
background: white;
.title {
color: black;
&:hover {
color: blue;
}
}
&:hover {
background: lightgray;
}
}

C. .card {
background: white;
&:hover {
background: lightgray;
}
.title {
color: black;
}
&:hover .title {
color: blue;
}
}

D. .card {
background: white;
&:hover {
background: lightgray;
}
.title:hover {
color: blue;
}
.title {
color: black;
}
}

Solution

1. Step 1: Understand the hover effect scope

   The card's background changes on hover, and the title text color changes only when the card is hovered, not the title itself.

2. Step 2: Check nesting for hover on parent affecting child

   .card { background: white; &:hover { background: lightgray; } .title { color: black; } &:hover .title { color: blue; } } uses &:hover .title to style the title when the card is hovered, which is correct. .card { background: white; &:hover { .title { background: lightgray; color: blue; } } .title { color: black; } } nests .title inside &:hover but incorrectly applies background: lightgray to .title instead of the card. .card { background: white; .title { color: black; &:hover { color: blue; } } &:hover { background: lightgray; } } incorrectly applies hover on .title itself. .card { background: white; &:hover { background: lightgray; } .title:hover { color: blue; } .title { color: black; } } styles .title:hover, which triggers only when hovering the title, not the card.

3. Final Answer:

   .card { background: white; &:hover { background: lightgray; } .title { color: black; } &:hover .title { color: blue; } } -> Option C

4. Quick Check:

   Parent hover affecting child style = D [OK]

Hint: Use & hover then space child selector for nested hover effects [OK]

Common Mistakes:

• Applying hover on child instead of parent
• Nesting child inside &:hover block incorrectly
• Using child:hover instead of parent:hover child