Nesting depth and best practices in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

SASS

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

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

A.button

B#button

Cbutton

D&.button

Attempts:

3 left

💡 Hint

Common Mistakes

Using an ID selector (#button) instead of a class selector.

Forgetting the dot before the class name.

Using the element selector without a dot.

In Sass, to nest styles for a class inside another, you write the nested class selector inside the parent block. Here, .button is nested inside .container.

2fill in blank

medium

Complete the code to nest the :hover pseudo-class inside .link.

SASS

.link {
  [1] {
    text-decoration: underline;
  }
}

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

A:hover

B&:hover

C.hover

D#hover

Attempts:

3 left

💡 Hint

Common Mistakes

Writing :hover without &.

Using class or ID selectors instead of pseudo-classes.

In Sass, to nest a pseudo-class like :hover, use the ampersand & to refer to the parent selector, then add the pseudo-class.

3fill in blank

hard

Fix the error in the nested Sass code to correctly style li elements inside ul.menu.

SASS

ul.menu {
  [1] li {
    padding: 10px;
  }
}

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

A>

B&:hover

C&

D& >

Attempts:

3 left

💡 Hint

Common Mistakes

Using combinators like > incorrectly inside the selector.

Adding pseudo-classes when not needed.

To nest li inside ul.menu, use & li where the ampersand & refers to the parent selector.

4fill in blank

hard

Fill both blanks to create a nested Sass rule that styles p elements inside .card only when hovered.

SASS

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

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

Ap

B&:hover

C&

D:hover

Attempts:

3 left

💡 Hint

Common Mistakes

Using :hover without & which refers to the wrong selector.

Nesting :hover before the element selector.

First, nest the p elements inside .card. Then nest the hover state using &:hover to style p only when the p is hovered.

5fill in blank

hard

Fill all three blanks to write a Sass nested rule that styles span inside .alert when span has class .active and is hovered.

SASS

.alert {
  [1] {
    [2] {
      [3] {
        font-weight: bold;
      }
    }
  }
}

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

Aspan

B&.active

C&:hover

D.active

Attempts:

3 left

💡 Hint

Common Mistakes

Using .active without &, which targets a child instead of the parent.

Placing :hover before .active.

Not nesting selectors in the correct order.

First, nest the span inside .alert. Then nest the class .active using &.active. Finally, nest the hover state with &:hover to style span only when it is active and hovered.

Practice

1. What is the recommended maximum nesting depth in Sass to keep CSS simple and maintainable?

easy

A. 5 levels

B. 3 levels

C. 10 levels

D. No limit

Solution

1. Step 1: Understand nesting depth concept

   Nesting depth means how many levels of selectors are nested inside each other in Sass.

2. Step 2: Recall best practice for nesting depth

   Best practice is to keep nesting shallow, usually up to 3 levels, to avoid complex and slow CSS.

3. Final Answer:

   3 levels -> Option B

4. Quick Check:

   Nesting depth limit = 3 levels [OK]

Hint: Remember: shallow nesting means max 3 levels [OK]

Common Mistakes:

• Thinking deeper nesting is always better
• Ignoring performance impact of deep nesting
• Confusing nesting depth with selector specificity

2. Which of the following Sass nesting syntaxes is correct for nesting a .button class inside a .container class?

easy

A. .container .button { color: blue; }

B. .container > .button { color: blue; }

C. .container { .button { color: blue; } }

D. .container + .button { color: blue; }

Solution

1. Step 1: Identify correct Sass nesting syntax

   In Sass, nesting is done by placing the nested selector inside curly braces of the parent selector.

2. Step 2: Check each option

   .container { .button { color: blue; } } uses correct Sass nesting syntax. The other options use standard CSS combinators: space for descendants, > for direct children, and + for adjacent siblings.

3. Final Answer:

   .container { .button { color: blue; } } -> Option C

4. Quick Check:

   Sass nesting uses curly braces inside parent selector [OK]

Hint: Sass nesting uses braces inside parent selector [OK]

Common Mistakes:

• Using CSS selector syntax instead of Sass nesting
• Missing curly braces for nested selectors
• Confusing combinators with nesting

3. Given the Sass code:

.nav {
  ul {
    li {
      color: red;
    }
  }
}

What is the compiled CSS output?

medium

A. .nav { ul { li { color: red; } } }

B. .nav > ul > li { color: red; }

C. ul li .nav { color: red; }

D. .nav ul li { color: red; }

Solution

1. Step 1: Understand Sass nesting compilation

   Sass nesting compiles to combined selectors separated by spaces representing descendant selectors.

2. Step 2: Combine selectors from nesting

   .nav contains ul, which contains li, so combined selector is .nav ul li.

3. Final Answer:

   .nav ul li { color: red; } -> Option D

4. Quick Check:

   Nesting compiles to combined descendant selectors [OK]

Hint: Nested selectors combine with spaces in compiled CSS [OK]

Common Mistakes:

• Expecting nested braces in CSS output
• Using child combinators (>) instead of descendants
• Reversing selector order

4. Identify the error in this Sass code snippet:

.card {
  .header {
    .title {
      font-weight: bold;
    }
  }
  .footer {
    color: gray;
  }
  .content {
    padding: 10px;
    .text {
      font-size: 14px;
    }
  }
}

medium

A. No error, code follows best practices

B. Missing semicolon after font-weight

C. Incorrect use of class selectors inside .card

D. Nesting depth exceeds recommended 3 levels

Solution

1. Step 1: Check nesting depth in each nested block

   Maximum nesting is 3 levels: .card > .header > .title and .card > .content > .text.

2. Step 2: Verify syntax and selector usage

   All semicolons are present and class selectors are correctly nested inside .card.

3. Final Answer:

   No error, code follows best practices -> Option A

4. Quick Check:

   Nesting depth ≤ 3 and syntax correct [OK]

Hint: Count nesting levels; max 3 is safe [OK]

Common Mistakes:

• Assuming 4 levels nesting here (it's 3 max)
• Missing semicolons in Sass blocks
• Misreading nested selectors as errors

5. You want to style a navigation menu with nested submenus using Sass. Which approach best follows nesting depth best practices and keeps code readable?

.nav {
  ul {
    li {
      a {
        color: black;
      }
      ul {
        li {
          a {
            color: gray;
          }
        }
      }
    }
  }
}

hard

A. Flatten nesting by using separate selectors for submenu links

B. Increase nesting depth to 5 for better structure

C. Use @extend to avoid nesting altogether

D. Keep nesting as is, max depth 4 levels is fine for menus

Solution

1. Step 1: Analyze current nesting depth

   Current nesting goes 4 levels deep (.nav > ul > li > a > ul > li > a), which exceeds recommended 3 levels.

2. Step 2: Consider best practice for readability and performance

   Flattening nesting by writing separate selectors for submenu links reduces depth and improves maintainability.

3. Final Answer:

   Flatten nesting by using separate selectors for submenu links -> Option A

4. Quick Check:

   Keep nesting ≤ 3 levels by flattening submenu styles [OK]

Hint: Flatten deep nesting by separating submenu styles [OK]

Common Mistakes:

• Allowing nesting deeper than 3 levels
• Using @extend incorrectly to replace nesting
• Increasing nesting depth thinking it improves clarity