Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

// ── Decision guide: @extend vs @mixin ────────────────────────────────────────

// USE @extend + %placeholder when:
// - Styles are identical (no variation per use)
// - All uses are in the same file / compilation unit
// - Output CSS size is a concern

%card-shell {
    border-radius: 8px;
    padding      : 1.5rem;
    background   : #fff;
    box-shadow   : 0 2px 8px rgba(0,0,0,.08);
}

.product-card  { @extend %card-shell; display: flex; flex-direction: column; }
.profile-card  { @extend %card-shell; text-align: center; }
.summary-card  { @extend %card-shell; border-left: 4px solid #3498db; }

// USE @mixin when:
// - Styles vary per use (parametric)
// - Use spans multiple files / modules
// - Mixin includes @content, loops, or conditional logic

@mixin elevation($level: 1) {
    $shadows: (
        1: 0 1px 3px rgba(0,0,0,.12),
        2: 0 4px 12px rgba(0,0,0,.15),
        3: 0 8px 24px rgba(0,0,0,.2)
    );
    box-shadow: map.get($shadows, $level);
}

.tooltip   { @include elevation(1); }
.dropdown  { @include elevation(2); }
.modal     { @include elevation(3); }

// ── Why @extend fails across modules ─────────────────────────────────────────
// In modern SASS with @use, this will throw an error:
//
// _cards.scss:
//   @use 'placeholders';
//   .card { @extend placeholders.%card-shell; }  ← NOT allowed
//
// Solution: Move placeholders into the same file, or switch to a mixin.