Content blocks with @content in SASS - Browser Rendering Trace

Render Flow - Content blocks with @content

Read SASS file

↓

Parse mixin with @content

↓

Store mixin template

↓

Encounter mixin call with block

↓

Inject @content block into mixin

↓

Compile to CSS

↓

Browser applies CSS styles

The SASS compiler reads the mixin with @content, waits for a block of styles to be passed in, then inserts that block where @content is used, producing final CSS that the browser renders.

Render Steps - 3 Steps

Code Added:Basic card styles without @content block

Before

[__________]
|          |
|          |
|          |
|__________|

→

After

[┌────────┐]
|│        │|
|│        │|
|│        │|
[└────────┘]

The card gets a border, padding, and background color, forming a visible box.

🔧 Browser Action:Creates box model with border, padding, and background paint

Code Sample

A styled card box with border, padding, and a shadow added via @content block inside the mixin.

SASS

<div class="card">
  <h2>Title</h2>
  <p>Some text here.</p>
</div>

SASS

@mixin card-style {
  border: 2px solid #333;
  padding: 1rem;
  border-radius: 0.5rem;
  background: #f9f9f9;
  @content;
}

.card {
  @include card-style {
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.1);
  }
}

Render Quiz - 3 Questions

After applying step 2, what visual change do you see on the card?

A The card background changes to blue

B The card border disappears

C A subtle shadow appears around the card

D The card text becomes bold

Common Confusions - 2 Topics

Why doesn't the box-shadow appear if I forget to use @content block?

Without the @content block inside the mixin, any styles passed in the mixin call block are ignored, so box-shadow won't be added visually.

💡 Always include @content inside mixins to insert passed style blocks.

Can I use @content multiple times inside one mixin?

Yes, @content can be used multiple times per mixin. Each occurrence inserts the content block again at that position.

💡 Use multiple @content to repeat the passed style block where needed.

Property Reference

Property	Value Applied	Visual Effect	Common Use
border	2px solid #333	Creates visible box outline	Defines card edges
padding	1rem	Adds space inside border	Separates content from edges
border-radius	0.5rem	Rounds corners	Softens box shape
background	#f9f9f9	Light gray background color	Card background
box-shadow	0 0.5rem 1rem rgba(0,0,0,0.1)	Adds subtle shadow	Visual depth and elevation

Concept Snapshot

SASS mixins can include @content to accept style blocks. @include calls pass a block that @content inserts. Allows flexible style extension inside reusable mixins. Without @content, passed blocks are ignored. @content can be used multiple times per mixin to repeat the injected styles.