Content blocks with @content in SASS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a mixin that accepts a content block.

SASS

@mixin box {  
  border: 1rem solid black;
  padding: 1rem;
  [1];
}

Drag options to blanks, or click blank then click option'

A@include

B@import

C@content

D@extend

Attempts:

3 left

💡 Hint

Common Mistakes

Using @include inside the mixin instead of @content.

Trying to use @extend or @import which are unrelated here.

The @content directive is used inside a mixin to include the content block passed when the mixin is called.

2fill in blank

medium

Complete the code to include the mixin with a content block.

SASS

.card {
  @include box {
    [1]: red;
  }
}

Drag options to blanks, or click blank then click option'

Afont-size

Bborder-color

Ccolor

Dbackground-color

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'color' which changes text color, not background.

Using 'border-color' which changes border color.

Inside the content block, you can write any CSS property. Here, background-color is used to set the card's background.

3fill in blank

hard

Fix the error in the mixin call to correctly pass the content block.

SASS

.alert {
  @include box [1] 
    color: white;
    background-color: red;
  }
}

Drag options to blanks, or click blank then click option'

A{

B(

C<

D[

Attempts:

3 left

💡 Hint

Common Mistakes

Using parentheses instead of curly braces for the content block.

Forgetting to open the block with any brace.

When passing a content block to a mixin, use curly braces { } to wrap the block.

4fill in blank

hard

Complete the code to define and use a mixin with a content block that adds a shadow and custom styles.

SASS

@mixin shadow-box {
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
  {BLANK_1}};
}

.card {
  @include shadow-box {
    border-radius: 0.5rem;
  }

Drag options to blanks, or click blank then click option'

A@content

B@include

C{

D(

Attempts:

3 left

💡 Hint

Common Mistakes

Using parentheses instead of curly braces when calling the mixin.

Forgetting to use @content inside the mixin.

Inside the mixin, @content inserts the passed block. When calling the mixin with a block, use curly braces { }.

5fill in blank

hard

Fill both blanks to create a mixin that styles a button with a content block for hover styles.

SASS

@mixin button-style {
  padding: 1rem 2rem;
  border: none;
  cursor: pointer;
  [1];
  &:hover {
    [2];
  }
}

Drag options to blanks, or click blank then click option'

A@content

B{

Cbackground-color: darkblue

D(

Attempts:

3 left

💡 Hint

Common Mistakes

Using parentheses instead of curly braces for the hover block.

Not using @content to include the content block.

Missing CSS property inside hover block.

Use @content to insert extra styles. The hover block needs curly braces { } and inside it, a CSS property like background-color.

Practice

1. What is the main purpose of @content in Sass?

easy

A. To pass custom styles into a mixin for flexible reuse

B. To define variables inside a mixin

C. To import external CSS files

D. To create loops in Sass

Solution

1. Step 1: Understand what @content does

   @content allows you to insert custom CSS blocks inside a mixin, making it flexible.

2. Step 2: Compare with other options

   Variables, imports, and loops are different Sass features unrelated to @content.

3. Final Answer:

   To pass custom styles into a mixin for flexible reuse -> Option A

4. Quick Check:

   @content = custom styles in mixin [OK]

Hint: Remember: @content inserts custom styles inside mixins [OK]

Common Mistakes:

• Confusing @content with variables or imports
• Thinking @content creates loops
• Assuming @content is for defining selectors

2. Which of the following is the correct syntax to use @content inside a mixin?

easy

A. @mixin example { @include content; }

B. @mixin example { content(); }

C. @mixin example { @content; }

D. @mixin example { content; }

Solution

1. Step 1: Recall the syntax for content blocks

   Inside a mixin, @content; is used to insert the passed block.

2. Step 2: Check each option

   Only @mixin example { @content; } uses @content; correctly with the semicolon.

3. Final Answer:

   @mixin example { @content; } -> Option C

4. Quick Check:

   Correct syntax uses @content; inside mixin [OK]

Hint: Use @content; with a semicolon inside mixins [OK]

Common Mistakes:

• Omitting the @ symbol before content
• Using parentheses like a function call
• Forgetting the semicolon after @content

3. What will be the output CSS of this Sass code?

@mixin card {
  border: 1px solid black;
  padding: 1rem;
  @content;
}

.box {
  @include card {
    background-color: yellow;
  }
}

medium

A. .box { border: 1px solid black; padding: 1rem; } .box { background-color: yellow; }

B. .box { border: 1px solid black; padding: 1rem; background-color: yellow; }

C. .box { background-color: yellow; }

D. Syntax error, no output

Solution

1. Step 1: Understand mixin with @content

   The mixin card adds border and padding, then inserts the passed block with @content.

2. Step 2: Check how .box includes the mixin

   The block inside @include card { ... } adds background-color: yellow; inside the mixin's content.

3. Final Answer:

   .box { border: 1px solid black; padding: 1rem; background-color: yellow; } -> Option B

4. Quick Check:

   Mixin + @content block = combined styles [OK]

Hint: Mixin styles + @content block styles combine inside selector [OK]

Common Mistakes:

• Thinking @content styles appear outside the selector
• Expecting separate CSS blocks for mixin and content
• Assuming syntax error due to block usage

4. Identify the error in this Sass code using @content:

@mixin highlight {
  background: yellow;
  @content
}

.text {
  @include highlight {
    color: red;
  }
}

medium

A. Missing semicolon after @content

B. Mixin name should be @content

C. Cannot use blocks with @include

D. Background property is invalid

Solution

1. Step 1: Check syntax of @content inside mixin

   @content must end with a semicolon to be valid.

2. Step 2: Verify other parts

   Mixin name and block usage are correct; background property is valid CSS.

3. Final Answer:

   Missing semicolon after @content -> Option A

4. Quick Check:

   @content requires semicolon [OK]

Hint: Always put semicolon after @content inside mixins [OK]

Common Mistakes:

• Omitting semicolon after @content
• Confusing mixin and content names
• Thinking block usage with @include is invalid

5. You want to create a reusable button style mixin that allows custom hover styles using @content. Which Sass code correctly achieves this?

hard

A. @mixin button { padding: 1rem; border: none; @content; &:hover { @content; } }

B. @mixin button { padding: 1rem; border: none; @content; } .btn:hover { @content; }

C. @mixin button { padding: 1rem; border: none; } .btn { @include button; &:hover { @content; } }

D. @mixin button { padding: 1rem; border: none; @content; &:hover { @content; } } .btn { @include button { color: blue; &:hover { color: red; } } }

Solution

1. Step 1: Understand the goal

   Create a mixin that sets base button styles and allows custom styles including hover via @content.

2. Step 2: Analyze each option

   @mixin button { padding: 1rem; border: none; @content; &:hover { @content; } } .btn { @include button { color: blue; &:hover { color: red; } } } defines the mixin with @content inside and inside &:hover, then includes it with a block that passes normal and hover styles. This correctly applies custom hover styles.

3. Step 3: Why others fail

   @mixin button { padding: 1rem; border: none; @content; &:hover { @content; } } tries to use @content twice in the mixin without passing blocks properly. @mixin button { padding: 1rem; border: none; @content; } .btn:hover { @content; } applies hover styles outside the mixin, losing reusability. @mixin button { padding: 1rem; border: none; } .btn { @include button; &:hover { @content; } } misuses @content outside mixin context.

4. Final Answer:

   @mixin button { padding: 1rem; border: none; @content; &:hover { @content; } } .btn { @include button { color: blue; &:hover { color: red; } } } -> Option D

5. Quick Check:

   Mixin with @content block for hover = @mixin button { padding: 1rem; border: none; @content; &:hover { @content; } } .btn { @include button { color: blue; &:hover { color: red; } } } [OK]

Hint: Pass hover styles inside @include block with nested &:hover [OK]

Common Mistakes:

• Using @content outside mixin
• Trying to call @content multiple times without blocks
• Defining hover styles outside mixin losing flexibility