Content Blocks and @content
A mixin can expose a content block using @content. The caller supplies additional Sass content inside the @include block, and the mixin inserts that content at the designated position.
This pattern is useful for reusable media-query wrappers, feature-specific style contexts, and APIs that need to wrap caller-provided declarations.
Content blocks should remain straightforward. Complex nested content APIs can make it difficult to determine where declarations will be emitted.
Reusable Responsive Wrapper
@mixin respond-to($min-width) {
@media (min-width: $min-width) {
@content;
}
}
.dashboard {
display: grid;
grid-template-columns: 1fr;
@include respond-to(48rem) {
grid-template-columns: 16rem 1fr;
gap: 1.5rem;
}
}💡 The mixin accepts a breakpoint and wraps the caller's declarations in a media query. The included content becomes the media query's body.
This abstraction can be useful when a project has a standardized responsive API. Keep breakpoint values consistent across the codebase.
Knowledge Check
What does `@content` allow a mixin to do?