Extending vs mixing comparison in SASS - Practice Questions

Challenge - 5 Problems

🧠 Conceptual

intermediate

Difference in CSS output size between @extend and @mixin

Consider the following Sass code snippets. Which option correctly describes the difference in the compiled CSS size when using @extend versus @mixin?

SASS

@mixin button-style {
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  background-color: blue;
  color: white;
}

.button1 {
  @extend .base-button;
}

.button2 {
  @include button-style;
}

A Using <code>@extend</code> creates one combined CSS rule shared by all selectors, reducing CSS size; <code>@mixin</code> duplicates styles for each use, increasing CSS size.

B <code>@extend</code> removes all styles from the original selector; <code>@mixin</code> keeps styles only in the mixin definition.

C Both <code>@extend</code> and <code>@mixin</code> always produce identical CSS size regardless of usage.

D <code>@extend</code> duplicates styles for each selector, increasing CSS size; <code>@mixin</code> creates one combined CSS rule shared by all selectors, reducing CSS size.

💡 Hint

Think about how @extend merges selectors in the output CSS.

@extend merges selectors sharing the same styles into one CSS rule, which reduces duplication and CSS size. @mixin copies the styles into every selector that includes it, increasing CSS size if used multiple times.

📝 Syntax

intermediate

Correct syntax to include a mixin with parameters

Which option shows the correct way to define and include a mixin with a parameter $color in Sass?

SASS

@mixin colored-text($color) {
  color: $color;
}

.text {
  /* include mixin here */
}

A @extend colored-text(blue);

B @mixin colored-text(blue);

C @include colored-text;

D @include colored-text(blue);

💡 Hint

Remember that @include is used to call mixins.

You use @include followed by the mixin name and parentheses with arguments to include a mixin with parameters.

❓ rendering

advanced

Visual difference when using @extend vs @mixin for hover styles

Given these Sass snippets, which compiled CSS will produce a hover effect only on .button and not on .link?

SASS

// Using @extend
.button {
  @extend %hover-style;
}
.link {
  @extend %hover-style;
}

%hover-style {
  &:hover {
    color: red;
  }
}

// Using @mixin
@mixin hover-style {
  &:hover {
    color: red;
  }
}

.button {
  @include hover-style;
}
.link {
  // no hover style included
}

A The @mixin version applies hover only to .button; the @extend version applies hover to both .button and .link.

B The @extend version applies hover only to .button; the @mixin version applies hover to both .button and .link.

C Both versions apply hover to only .button.

D Neither version applies hover to any element.

💡 Hint

Check which selectors get combined in the compiled CSS for @extend.

@extend merges selectors that extend the same placeholder, so both .button and .link share the hover style. The @mixin version applies hover only where included.

❓ selector

advanced

Selector specificity when using @extend with multiple selectors

If you have this Sass code, what will be the compiled CSS selector for .alert after extending .message, .notification?

SASS

.message, .notification {
  border: 1px solid black;
}

.alert {
  @extend .message, .notification;
}

A .alert { border: 1px solid black; }

B .message, .notification, .alert { border: 1px solid black; }

C .message.alert, .notification.alert { border: 1px solid black; }

D .message, .notification { border: 1px solid black; }

💡 Hint

Think about how @extend merges selectors in the output.

@extend adds the extending selector to all selectors it extends, combining them in one rule.

❓ accessibility

expert

Accessibility impact of using @extend vs @mixin for focus styles

Which statement best explains the accessibility impact when using @extend versus @mixin for focus styles on interactive elements?

A Both <code>@extend</code> and <code>@mixin</code> have no impact on accessibility because styles do not affect keyboard navigation.

B <code>@mixin</code> always removes focus styles, reducing accessibility; <code>@extend</code> ensures focus styles are applied correctly.

C <code>@extend</code> can unintentionally apply focus styles to unrelated elements sharing selectors, possibly confusing keyboard users; <code>@mixin</code> scopes styles only where included, improving accessibility.

D <code>@extend</code> duplicates focus styles for each element, causing flickering; <code>@mixin</code> merges focus styles into one rule.

💡 Hint

Consider how selectors are combined and how that affects which elements get focus styles.

@extend merges selectors, so focus styles might apply to elements that share selectors but are not intended to have focus styles, confusing users relying on keyboard navigation. @mixin applies styles only where included, keeping focus styles scoped and clear.

Practice

1. What is the main difference between @extend and @mixin in Sass?

easy

A. @extend shares styles by combining selectors, @mixin copies styles into selectors.

B. @extend copies styles into selectors, @mixin combines selectors.

C. @extend creates new CSS files, @mixin deletes unused styles.

D. @extend is used only for variables, @mixin is used only for functions.

Solution

1. Step 1: Understand @extend behavior

   @extend merges selectors that share the same styles, reducing CSS size by combining rules.

2. Step 2: Understand @mixin behavior

   @mixin copies the style block wherever it is included, allowing flexible reuse but increasing CSS size.

3. Final Answer:

   @extend shares styles by combining selectors, @mixin copies styles into selectors. -> Option A

4. Quick Check:

   @extend combines, @mixin copies [OK]

Hint: Remember: extend merges selectors, mixin copies styles [OK]

Common Mistakes:

• Confusing which one copies vs combines styles
• Thinking @extend creates new CSS files
• Believing @mixin deletes unused styles

2. Which of the following is the correct syntax to include a mixin named button-style in Sass?

easy

A. @extend button-style;

B. @include button-style;

C. @mixin button-style;

D. @use button-style;

Solution

1. Step 1: Recall mixin inclusion syntax

   To use a mixin, Sass requires @include mixin-name; syntax.

2. Step 2: Differentiate from other directives

   @extend is for extending selectors, @mixin defines mixins, and @use imports modules.

3. Final Answer:

   @include button-style; -> Option B

4. Quick Check:

   Use @include to add mixins [OK]

Hint: Use @include to add mixins, not @extend or @mixin [OK]

Common Mistakes:

• Using @extend instead of @include for mixins
• Confusing @mixin (definition) with @include (usage)
• Using @use for mixins instead of modules

3. Given the Sass code:

@mixin red-text { color: red; }
.button { @include red-text; }

What CSS will be generated?

medium

A. .button, .red-text { color: red; }

B. Error: mixin not extended

C. .red-text { color: red; }

D. .button { color: red; }

Solution

1. Step 1: Understand mixin inclusion

   The mixin red-text defines color: red;. Including it copies this style into .button.

2. Step 2: Check generated CSS

   The CSS will have .button { color: red; } because the mixin's styles are copied inside the selector.

3. Final Answer:

   .button { color: red; } -> Option D

4. Quick Check:

   Mixin copies styles inside selector [OK]

Hint: Mixins copy styles inside selectors, no selector merging [OK]

Common Mistakes:

• Expecting selectors to merge like @extend
• Thinking mixin creates separate class
• Assuming syntax error without @extend

4. Identify the error in this Sass code:

.alert { color: red; }
.error { @extend .alert; }
.error { background: yellow; }

medium

A. No error; code compiles and merges selectors.

B. Error: Cannot extend a class defined after the extend.

C. Error: Duplicate selector .error is not allowed.

D. Error: @extend cannot be used inside .error selector.

Solution

1. Step 1: Check @extend usage

   @extend merges selectors with the same styles. Extending .alert inside .error is valid.

2. Step 2: Confirm multiple declarations for .error

   Multiple declarations for .error are allowed and combined in CSS output.

3. Final Answer:

   No error; code compiles and merges selectors. -> Option A

4. Quick Check:

   @extend merges selectors, multiple declarations allowed [OK]

Hint: Multiple declarations allowed; @extend merges selectors [OK]

Common Mistakes:

• Thinking duplicate selectors cause errors
• Believing @extend must come before class definition
• Assuming @extend cannot be inside selector

5. You want to create a reusable button style that can be customized with different colors without duplicating CSS selectors. Which approach is best?

hard

A. Use @extend to share base button styles and override colors separately.

B. Use @extend with color parameters inside the mixin.

C. Use @mixin with a color parameter to copy styles with different colors.

D. Use plain CSS classes without Sass features for flexibility.

Solution

1. Step 1: Understand the need for customization

   Customizing colors requires flexibility to pass different values for each button.

2. Step 2: Compare @extend and @mixin for this use case

   @extend merges selectors but cannot accept parameters. @mixin can accept parameters to customize styles.

3. Step 3: Choose the best approach

   Using a @mixin with a color parameter copies styles with different colors without duplicating selectors.

4. Final Answer:

   Use @mixin with a color parameter to copy styles with different colors. -> Option C

5. Quick Check:

   Mixins with parameters allow flexible style reuse [OK]

Hint: Use mixins with parameters for customizable reusable styles [OK]

Common Mistakes:

• Trying to pass parameters to @extend (not supported)
• Using @extend which merges selectors but lacks flexibility
• Avoiding Sass features and writing repetitive CSS