Avoiding over-nesting in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to nest the .button styles inside .container correctly.

SASS

.container {
  [1] {
    color: blue;
  }
}

Drag options to blanks, or click blank then click option'

Abutton

B.button

C#button

D&.button

Attempts:

3 left

💡 Hint

Common Mistakes

Using &.button adds the parent class to the selector, which is not needed here.

Using #button selects an ID, not a class.

Use .button to nest styles for elements with class button inside .container.

2fill in blank

medium

Complete the code to avoid over-nesting by using the parent selector & correctly.

SASS

.nav {
  [1] {
    font-weight: bold;
  }
}

Drag options to blanks, or click blank then click option'

A&-item

B.item

C#item

Ditem

Attempts:

3 left

💡 Hint

Common Mistakes

Using .item nests a separate class inside .nav, which can cause over-nesting.

Using #item selects an ID, which is incorrect here.

Using &-item appends -item to the parent selector .nav, creating .nav-item without extra nesting.

3fill in blank

hard

Fix the error in the code by choosing the correct way to avoid over-nesting.

SASS

.card {
  .header {
    [1] {
      color: red;
    }
  }
}

Drag options to blanks, or click blank then click option'

A#title

B.title

C&-title

Dtitle

Attempts:

3 left

💡 Hint

Common Mistakes

Using .title nests a separate class inside .header, causing over-nesting.

Using #title selects an ID, which is incorrect.

Using &-title appends -title to the parent .header, creating .card .header-title without extra nesting.

4fill in blank

hard

Fill both blanks to create a flat structure using the parent selector and avoid over-nesting.

SASS

.menu {
  [1] {
    [2] {
      color: green;
    }
  }
}

Drag options to blanks, or click blank then click option'

A&-item

B.link

C&-link

D.item

Attempts:

3 left

💡 Hint

Common Mistakes

Using .item and .link nests separate classes, causing over-nesting.

Using &-item and &-link appends suffixes to the parent selectors, creating .menu-item and .menu-item-link without deep nesting.

5fill in blank

hard

Fill all three blanks to write a clean, non-overnested Sass code using the parent selector.

SASS

.form {
  [1] {
    [2] {
      [3]: 1rem;
    }
  }
}

Drag options to blanks, or click blank then click option'

A&-group

B&-input

Cpadding

Dmargin

Attempts:

3 left

💡 Hint

Common Mistakes

Using separate classes without & causes deep nesting.

Choosing margin adds space outside, not inside.

Using &-group and &-input creates .form-group and .form-group-input. Adding padding styles the input with space inside.