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.