Why extending reduces duplication in SASS - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to extend the base button style.

SASS

.btn-primary {
  @extend [1];
  background-color: blue;
  color: white;
}

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

A.btn-primary

B.btn-secondary

C.btn

D.btn-base

Attempts:

3 left

💡 Hint

Common Mistakes

Extending the same class (.btn-primary) causes no effect.

Using a non-existent class name.

Forgetting the dot before the class name.

Using @extend with .btn-base copies its styles into .btn-primary, reducing repeated code.

2fill in blank

medium

Complete the code to extend multiple classes.

SASS

.alert-success {
  @extend [1];
  @extend .alert;
  background-color: green;
}

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

A.alert-base

B.alert-danger

C.alert-warning

D.alert-success

Attempts:

3 left

💡 Hint

Common Mistakes

Extending the same class twice.

Using unrelated alert classes.

Missing the dot before the class name.

Extending .alert-base and .alert combines their styles, avoiding duplication.

3fill in blank

hard

Fix the error in the extend statement to reduce duplication.

SASS

.card-header {
  @extend [1];
  font-weight: bold;
}

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

A#card-base

Bcard-base

C.card-base

DcardBase

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting the dot before the class name.

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

Using camelCase instead of kebab-case.

Class names must start with a dot when used with @extend to correctly reference the selector.

4fill in blank

hard

Fill both blanks to create a reusable card style and extend it.

SASS

[1] {
  padding: 1rem;
  border: 1px solid #ccc;
}
.card-footer {
  @extend [2];
  font-size: 0.9rem;
  color: #666;
}

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

A.card-base

B.card-footer

D.card-header

Attempts:

3 left

💡 Hint

Common Mistakes

Extending the wrong class.

Forgetting the dot in class names.

Defining the base style without a class selector.

Defining .card-base and extending it in .card-footer reduces repeated padding and border styles.

5fill in blank

hard

Fill all three blanks to extend base button styles with modifiers.

SASS

.btn-base {
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  border: none;
}
.btn-primary {
  @extend [1];
  background-color: [2];
  color: [3];
}

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

A.btn-base

Bblue

Cwhite

Dred

Attempts:

3 left

💡 Hint

Common Mistakes

Not extending the base button class.

Using incorrect color names.

Mixing up background and text colors.

Extending .btn-base shares common button styles, while setting specific colors for .btn-primary reduces duplication.

Practice

1. What is the main benefit of using @extend in Sass?

easy

A. It reduces repeated CSS by sharing styles between selectors.

B. It adds new colors to your stylesheet automatically.

C. It compiles Sass into JavaScript code.

D. It creates animations without keyframes.

Solution

1. Step 1: Understand the purpose of @extend

   @extend allows one selector to inherit styles from another, avoiding repetition.

2. Step 2: Identify the benefit

   This sharing reduces duplicated CSS rules, making code cleaner and smaller.

3. Final Answer:

   It reduces repeated CSS by sharing styles between selectors. -> Option A

4. Quick Check:

   Extending reduces duplication = B [OK]

Hint: Remember: @extend shares styles to avoid repeats [OK]

Common Mistakes:

• Thinking @extend adds new styles instead of sharing
• Confusing @extend with mixins
• Believing @extend compiles to JavaScript

2. Which of the following is the correct syntax to extend a placeholder selector %button-base in Sass?

easy

A. .btn {@extends %button-base;}

B. .btn {@extend %button-base;}

C. .btn {extend %button-base;}

D. .btn {use %button-base;}

Solution

1. Step 1: Recall correct @extend syntax

   The correct keyword is @extend with an '@' symbol and a semicolon inside the block.

2. Step 2: Match syntax with options

   .btn {@extend %button-base;} uses @extend %button-base; correctly inside the selector block.

3. Final Answer:

   .btn {@extend %button-base;} -> Option B

4. Quick Check:

   Correct @extend syntax = C [OK]

Hint: Look for '@extend' with '@' and semicolon inside braces [OK]

Common Mistakes:

• Missing '@' symbol before extend
• Using 'extends' instead of 'extend'
• Omitting semicolon after extend statement

3. Given the Sass code:

%base { color: blue; font-weight: bold; }
.title {@extend %base; font-size: 2rem;}
.subtitle {@extend %base; font-size: 1.5rem;}

What CSS will be generated?

medium

A. .title, .subtitle { color: blue; font-weight: bold; } .title { font-size: 2rem; } .subtitle { font-size: 1.5rem; }

B. .title { color: blue; font-weight: bold; font-size: 2rem; } .subtitle { color: blue; font-weight: bold; font-size: 1.5rem; }

C. %base { color: blue; font-weight: bold; } .title { font-size: 2rem; } .subtitle { font-size: 1.5rem; }

D. .title { font-size: 2rem; } .subtitle { font-size: 1.5rem; }

Solution

1. Step 1: Understand @extend behavior

   Extending a placeholder merges selectors sharing the same styles into one CSS rule.

2. Step 2: Analyze generated CSS

   Both .title and .subtitle share color: blue and font-weight: bold in a combined selector. Their font sizes remain separate.

3. Final Answer:

   .title, .subtitle { color: blue; font-weight: bold; } .title { font-size: 2rem; } .subtitle { font-size: 1.5rem; } -> Option A

4. Quick Check:

   Shared styles combined, unique styles separate = A [OK]

Hint: Shared styles combine selectors; unique styles stay separate [OK]

Common Mistakes:

• Expecting duplicated shared styles for each selector
• Thinking placeholder selectors appear in CSS
• Confusing @extend with mixins copying styles

4. Identify the error in this Sass code:

%card { padding: 1rem; border: 1px solid #ccc; }
.panel { @extend card; background: white; }

medium

A. Padding value must be in pixels, not rem.

B. Cannot extend placeholder selectors.

C. Background property is invalid inside .panel.

D. Missing '%' before 'card' in the extend statement.

Solution

1. Step 1: Check @extend syntax

   The placeholder selector %card must be referenced with the '%' in the extend statement.

2. Step 2: Identify the error

   The code uses @extend card; missing the '%', causing a syntax error.

3. Final Answer:

   Missing '%' before 'card' in the extend statement. -> Option D

4. Quick Check:

   Extend placeholder needs '%' = D [OK]

Hint: Always include '%' when extending placeholders [OK]

Common Mistakes:

• Forgetting '%' in extend target
• Thinking placeholders can't be extended
• Misunderstanding property units

5. You have multiple button styles sharing common properties. How does using @extend with a placeholder selector help maintain your Sass code better compared to copying styles into each button class?

hard

A. It automatically generates JavaScript to handle button clicks.

B. It duplicates all styles for each button, increasing CSS size but improving clarity.

C. It creates one combined CSS rule for shared styles, reducing file size and easing updates.

D. It prevents any styles from being applied until manually enabled.

Solution

1. Step 1: Understand style duplication problem

   Copying shared styles into each button class repeats code, making updates tedious and CSS larger.

2. Step 2: Explain @extend advantage

   Using @extend with a placeholder merges shared styles into one CSS rule, reducing duplication and file size.

3. Step 3: Benefits for maintenance

   Updating shared styles in one place updates all buttons, making code easier to maintain.

4. Final Answer:

   It creates one combined CSS rule for shared styles, reducing file size and easing updates. -> Option C

5. Quick Check:

   Extending merges shared styles = A [OK]

Hint: Extend placeholders to combine shared styles and simplify updates [OK]

Common Mistakes:

• Thinking extend duplicates styles instead of merging
• Confusing extend with JavaScript generation
• Believing styles are disabled until enabled