Basic selector nesting in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is selector nesting in Sass?

Selector nesting in Sass lets you write CSS selectors inside other selectors, making your styles easier to read and organize, like putting related rules together.

beginner

How does nesting improve CSS writing?

Nesting groups related styles visually, reduces repetition of selectors, and shows the relationship between elements clearly, similar to how folders organize files.

intermediate

What does the & symbol mean in Sass nesting?

The & symbol represents the parent selector. It helps you build more complex selectors by combining the parent with additional parts.

beginner

Example: How would you nest a p inside a div in Sass?

You write div { p { color: blue; } }. This means all p tags inside div will have blue text.

intermediate

Why should you avoid too deep nesting in Sass?

Too deep nesting creates complicated CSS selectors that are hard to read and maintain, and can slow down the browser when applying styles.

What does nesting selectors in Sass help you do?

A Run JavaScript inside CSS

B Create new HTML elements

C Automatically minify CSS files

D Write related CSS rules inside each other for clarity

Nesting lets you write CSS selectors inside others to show their relationship clearly.

In Sass, what does the & symbol represent inside nested selectors?

A The parent selector

B A new class

C A CSS property

D A comment

The & symbol stands for the parent selector in nested Sass rules.

Which of these is a good reason to use nesting in Sass?

A To avoid using classes

B To increase CSS file size

C To organize styles related to a parent element

D To write inline styles

Nesting helps organize styles that belong together under a parent selector.

What happens if you nest selectors too deeply in Sass?

A CSS runs faster

B CSS becomes complex and hard to maintain

C HTML changes automatically

D JavaScript errors occur

Deep nesting creates complicated CSS selectors that are difficult to read and maintain.

How would you write CSS for ul li a using Sass nesting?

A ul { li { a { color: red; } } }

B a { ul { li { color: red; } } }

C li { ul { a { color: red; } } }

D ul li a { color: red; }

Nesting inside ul then li then a matches the selector ul li a.

Explain how basic selector nesting works in Sass and why it is useful.

Think about how nesting is like putting related things inside boxes.

Describe the role of the & symbol in Sass nesting with an example.

The & is like saying 'this parent selector' inside nested rules.

Practice

1. What does the & symbol represent in Sass nesting?

easy

A. The parent selector in the nested rule

B. A new CSS class

C. A CSS property

D. A comment in Sass

Solution

1. Step 1: Understand the role of & in Sass

   The & symbol is used inside nested selectors to refer to the parent selector.

2. Step 2: Apply this understanding to nesting

   When you nest selectors, & helps avoid repeating the parent selector by representing it directly.

3. Final Answer:

   The parent selector in the nested rule -> Option A

4. Quick Check:

   & means parent selector [OK]

Hint: Remember & means 'this selector' inside nesting [OK]

Common Mistakes:

• Thinking & creates a new class
• Confusing & with CSS properties
• Assuming & is a comment

2. Which of the following is the correct Sass syntax to nest 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 nesting syntax in Sass

   In Sass, nesting is done by placing the child selector inside the parent block using curly braces.

2. Step 2: Check each option

   .container { .button { color: blue; } } correctly nests .button inside .container using braces. Options B and C are plain CSS selectors, not Sass nesting. .container, .button { color: blue; } combines selectors incorrectly.

3. Final Answer:

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

4. Quick Check:

   Nested selectors use braces inside parent [OK]

Hint: Nesting means putting selector inside braces of parent [OK]

Common Mistakes:

• Using plain CSS selectors instead of nesting
• Combining selectors with commas incorrectly
• Missing curly braces for nesting

3. Given the Sass code:

.nav {
  ul {
    margin: 0;
    li {
      list-style: none;
    }
  }
}

What is the compiled CSS output?

medium

A. .nav { ul { margin: 0; } li { list-style: none; } }

B. .nav ul, .nav li { margin: 0; list-style: none; }

C. .nav ul li { margin: 0; list-style: none; }

D. .nav ul { margin: 0; } .nav ul li { list-style: none; }

Solution

1. Step 1: Understand nesting levels

   The ul is nested inside .nav, so the selector becomes .nav ul. The li is nested inside ul, so it becomes .nav ul li.

2. Step 2: Write the compiled CSS

   Each nested block compiles to a combined selector with all parents. Properties stay inside their respective selectors.

3. Final Answer:

   .nav ul { margin: 0; } .nav ul li { list-style: none; } -> Option D

4. Quick Check:

   Nesting combines selectors in order [OK]

Hint: Nested selectors combine parents in order [OK]

Common Mistakes:

• Leaving nested selectors inside braces in output
• Combining properties incorrectly
• Using commas instead of nesting

4. Identify the error in this Sass code:

.card {
  &.active {
    background: green;
  }
  .title {
    font-weight: bold;
  }
  & .subtitle {
    font-size: 1.2rem;
  }
}

medium

A. Missing semicolon after font-weight: bold.

B. The selector & .subtitle adds an unwanted space, changing meaning.

C. Cannot use & with class selectors.

D. Nesting .title inside .card is invalid.

Solution

1. Step 1: Analyze the & .subtitle selector

   The space after & means it selects .card .subtitle. This is different from &.subtitle which selects .card.subtitle.

2. Step 2: Check other parts for errors

   Semicolons are present, & usage with classes is valid, and nesting .title inside .card is correct.

3. Final Answer:

   The selector & .subtitle adds an unwanted space, changing meaning. -> Option B

4. Quick Check:

   Space after & changes selector meaning [OK]

Hint: No space after & means same element, space means child [OK]

Common Mistakes:

• Adding space after & when not intended
• Thinking & cannot be combined with classes
• Missing semicolons (but they are present here)

5. You want to style a button inside a .card only when the card is .active. Which Sass nesting produces the correct CSS selector .card.active button?

hard

A. .card {
&.active {
button {
color: red;
}
}
}

B. .card {
button {
&.active {
color: red;
}
}
}

C. .card {
& button.active {
color: red;
}
}

D. .card.active {
&button {
color: red;
}
}

Solution

1. Step 1: Understand the target selector

   The selector .card.active button means a button inside a .card that also has the .active class.

2. Step 2: Check nesting structure

   .card { &.active { button { color: red; } } } nests button inside &.active inside .card, producing .card.active button. Other options either place .active on the button or use incorrect nesting.

3. Final Answer:

   .card { &.active { button { color: red; } } } -> Option A

4. Quick Check:

   Nesting &.active then button matches .card.active button [OK]

Hint: Nest &.active first, then button inside for correct selector [OK]

Common Mistakes:

• Placing .active on button instead of card
• Using & with space incorrectly
• Not nesting button inside &.active