Extending vs mixing comparison in SASS - Browser Rendering Compared

Render Flow - Extending vs mixing comparison

Write .button styles

→Create CSS rules for .button

↓

Use @extend in .primary

→Add .primary styles by reusing .button rules

↓

Use @mixin in .secondary

→Insert mixin styles into .secondary

↓

Compile final CSS with combined rules

The Sass compiler reads base styles, then applies @extend by merging selectors, and @mixin by copying styles into the target selector, producing final CSS.

Render Steps - 3 Steps

Code Added:.button { @include button-style; background-color: lightgray; border: none; }

Before

[No buttons styled]

[button] [button]

→

After

[button: lightgray background, padded, rounded]
[button: lightgray background, padded, rounded]

The base .button style applies padding, border-radius, and background color to all buttons with .button class.

🔧 Browser Action:Creates CSS rules for .button and applies styles to matching elements.

Code Sample

Two buttons styled: .primary reuses .button styles by extending, .secondary reuses styles by mixing in a shared style block.

SASS

<button class="button primary">Primary</button>
<button class="button secondary">Secondary</button>

SASS

@mixin button-style {
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  font-weight: bold;
}

.button {
  @include button-style;
  background-color: lightgray;
  border: none;
}

.primary {
  @extend .button;
  background-color: blue;
  color: white;
}

.secondary {
  @include button-style;
  background-color: green;
  color: white;
}

Render Quiz - 3 Questions

After applying step 2, what visual difference do you see on the .primary button?

A It looks the same as the base .button with lightgray background

B It has blue background and white text with padding and rounded corners

C It has green background and white text

D It loses all padding and border-radius

Common Confusions - 2 Topics

Why does @extend combine selectors but @mixin duplicates styles?

@extend tells Sass to merge selectors so they share one CSS rule, reducing CSS size. @mixin copies styles into each selector separately, so CSS grows but allows different overrides.

💡 Use @extend to share exact styles and keep CSS small; use @mixin to reuse styles but keep selectors independent.

Can I override styles after using @extend or @mixin?

Yes. After @extend, you can add new properties to the selector that override shared styles. After @mixin, you can add or override properties normally since styles are copied.

💡 Overrides work both ways, but @extend shares base styles, so be careful with conflicting rules.

Property Reference

Feature	How It Works	CSS Output	When to Use
@extend	Merges selectors sharing styles	Combined selectors with shared rules	When you want to avoid duplicate CSS and share exact styles
@mixin	Copies styles into each selector	Separate CSS rules with repeated styles	When you want reusable style blocks with flexibility

Concept Snapshot

@extend merges selectors to share styles, reducing CSS size. @mixin copies style blocks into selectors, increasing CSS size but allowing flexibility. Use @extend for exact style sharing. Use @mixin for reusable style blocks with overrides. Overrides work after both methods. Choose based on CSS size and style needs.