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.