Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

// ── Breakpoint mixin using @content ───────────────────────────────────────────

$breakpoints: (
    'xs' : 480px,
    'sm' : 640px,
    'md' : 768px,
    'lg' : 1024px,
    'xl' : 1280px
);

@mixin respond-to($bp) {
    $value: map.get($breakpoints, $bp);

@if $value == null {
        @warn "Unknown breakpoint `#{$bp}`.";
    } @else {
        @media (min-width: $value) {
            @content;  // caller's block goes here
        }
    }
}

// Usage — responsive styles stay with their component
.hero__title {
    font-size: 1.5rem;

@include respond-to('md') { font-size: 2.25rem; }
    @include respond-to('lg') { font-size: 3rem; }
}

// ── @content with arguments (passing data to the content block) ───────────────

$themes: (
    'light': (#fff, #333),
    'dark' : (#1a1a2e, #e0e0e0)
);

@mixin apply-themes {
    @each $name, $colors in $themes {
        $bg   : nth($colors, 1);
        $text : nth($colors, 2);

[data-theme="#{$name}"] {
            @content($bg, $text);  // pass bg + text to caller
        }
    }
}

.card {
    border-radius: 8px;
    padding      : 1.5rem;

// using clause captures the mixin's content arguments
    @include apply-themes using ($bg, $text) {
        background: $bg;
        color     : $text;
    }
}