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.