Content blocks with @content in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What is the output CSS of this Sass code using @content?

Consider the following Sass code. What CSS does it produce when compiled?

@mixin card() {
  border: 1px solid #ccc;
  padding: 1rem;
  @content;
  background: white;
}

.container {
  @include card() {
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
  }
}

SASS

@mixin card() {
  border: 1px solid #ccc;
  padding: 1rem;
  @content;
  background: white;
}

.container {
  @include card() {
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
  }
}

A

.container {
  border: 1px solid #ccc;
  padding: 1rem;
  background: white;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

B

.container {
  border: 1px solid #ccc;
  padding: 1rem;
  background: white;
}
.container {
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

C

.container {
  border: 1px solid #ccc;
  padding: 1rem;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
  background: white;
}

D

.container {
  border: 1px solid #ccc;
  padding: 1rem;
  background: white;
}
.box-shadow {
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

💡 Hint

Remember that @content inserts the block exactly where it is placed inside the mixin.

The @content block is inserted exactly where @content is called inside the mixin. So the box-shadow property appears between padding and background inside the .container rule.

🧠 Conceptual

intermediate

What happens if @content is missing inside a mixin?

Given this Sass mixin:

@mixin highlight() {
  background-color: yellow;
  @content;
  border: 1px solid orange;
}

What will happen if you include it without providing a content block like this?

.note {
  @include highlight();
}

SASS

@mixin highlight() {
  background-color: yellow;
  @content;
  border: 1px solid orange;
}

.note {
  @include highlight();
}

A The .note class will have yellow background and orange border, but no extra styles inside.

B It will cause a syntax error because @content is required.

C The mixin will be ignored and .note will have no styles.

D The .note class will be empty because @content is missing.

💡 Hint

Think about what @content does when no block is passed.

If no content block is passed, @content is simply ignored and the rest of the mixin styles apply normally.

❓ selector

advanced

How does @content affect nested selectors inside a mixin?

Look at this Sass code:

@mixin button-style() {
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  @content;
  &:hover {
    background-color: #eee;
  }
}

.btn {
  @include button-style() {
    background-color: blue;
    color: white;
  }
}

What CSS will be generated for the .btn:hover selector?

SASS

@mixin button-style() {
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  @content;
  &:hover {
    background-color: #eee;
  }
}

.btn {
  @include button-style() {
    background-color: blue;
    color: white;
  }
}

A

.btn:hover {
  background-color: blue;
  color: white;
}

B

.btn:hover {
  background-color: #eee;
}

C

.btn:hover {
  background-color: #eee;
  background-color: blue;
  color: white;
}

D No .btn:hover selector is generated.

💡 Hint

Remember that @content inserts styles inside the main selector, but &:hover is a nested selector inside the mixin.

The &:hover block inside the mixin creates a .btn:hover selector with background-color #eee. The @content block inserts styles inside .btn, not inside :hover.

❓ rendering

advanced

What visual effect will this Sass code produce?

Given this Sass code:

@mixin card() {
  border: 2px solid black;
  padding: 1rem;
  background: white;
  @content;
}

.article {
  @include card() {
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border-radius: 0.5rem;
  }
}

What will the .article box look like in a browser?

SASS

@mixin card() {
  border: 2px solid black;
  padding: 1rem;
  background: white;
  @content;
}

.article {
  @include card() {
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    border-radius: 0.5rem;
  }
}

A A white box with a black border, some padding, a subtle shadow, and rounded corners.

B A white box with a black border and padding but no shadow or rounded corners.

C A box with only shadow and rounded corners but no border or padding.

D A transparent box with no visible border, shadow, or padding.

💡 Hint

The @content block adds extra styles inside the box.

The mixin sets border, padding, and background. The @content block adds box-shadow and border-radius inside the same selector, so all styles combine visually.

❓ accessibility

expert

How can @content help improve accessibility in Sass components?

You want to create a reusable button style mixin that allows adding accessible focus styles via @content. Which approach below correctly uses @content to insert focus styles while keeping the base styles consistent?

@mixin accessible-button() {
  padding: 0.75rem 1.5rem;
  border: none;
  background-color: #007BFF;
  color: white;
  cursor: pointer;
  @content;
}

How should you include this mixin to add a visible focus outline for keyboard users?

SASS

@mixin accessible-button() {
  padding: 0.75rem 1.5rem;
  border: none;
  background-color: #007BFF;
  color: white;
  cursor: pointer;
  @content;
}

.button {
  @include accessible-button() {
    &:focus-visible {
      outline: 3px solid #FFD700;
      outline-offset: 2px;
    }
  }
}

A Add focus styles outside the mixin, separately targeting .button:focus-visible.

B Use JavaScript to add focus styles instead of Sass @content.

C Add focus styles inside the mixin before @content without using a content block.

D Include the mixin with a content block that adds &:focus-visible styles inside the button selector.

💡 Hint

Think about how @content lets you add custom nested selectors inside a reusable style block.

Using @content inside the mixin allows you to add custom nested selectors like &:focus-visible when including the mixin, keeping all related styles together and improving maintainability and accessibility.