Content blocks with @content in SASS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does the @content directive do in Sass?

The @content directive allows you to pass a block of styles into a mixin, letting you insert custom CSS where @content is placed.

beginner

How do you define a mixin that uses @content in Sass?

You define a mixin with @mixin and inside it, use @content where you want the passed styles to appear.

@mixin example() {
  border: 1px solid black;
  @content;
}

beginner

How do you include a mixin with a content block in Sass?

You use @include followed by curly braces {} containing the styles you want to pass as the content block.

@include example() {
  background: yellow;
}

intermediate

Why use @content instead of just passing arguments to a mixin?

@content lets you pass a whole block of CSS rules, not just values. This gives more flexibility to add complex or multiple styles inside the mixin.

intermediate

Can you use @content multiple times inside one mixin?

No, @content can only be used once inside a mixin. It marks the single place where the passed block of styles will be inserted.

What keyword do you use inside a Sass mixin to insert a block of styles passed from @include?

A @content

B @block

C @insert

D @pass

The @content directive is used inside a mixin to insert the styles passed in the content block.

How do you pass styles to a mixin that uses @content?

A Using parentheses with arguments

B Using curly braces after <code>@include</code>

C Using a separate CSS file

D Using <code>@extend</code>

You pass styles inside curly braces after @include to provide the content block.

Can @content be used more than once inside the same mixin?

A Only if you use <code>@repeat</code>

B Yes, multiple times

C No, only once

D Only inside nested mixins

@content can only appear once in a mixin to mark where the passed block goes.

What is a benefit of using @content in Sass mixins?

A It allows passing multiple CSS rules as a block

B It compiles CSS faster

C It replaces variables

D It automatically prefixes CSS

@content lets you pass a block of CSS rules, giving more flexibility than just passing values.

Which of these is the correct way to define a mixin with @content?

A @mixin example() { @block; }

B @mixin example() { content; }

C @mixin example() { @include content; }

D @mixin example() { @content; }

The correct syntax uses @content inside the mixin to mark where the passed block goes.

Explain how @content works in Sass mixins and why it is useful.

Think about how you can insert custom CSS inside a reusable style block.

Describe the steps to create and use a Sass mixin that accepts a content block.

Imagine you want to reuse a style but add different inner styles each time.