Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

// ── %placeholder selectors — emitted only when extended ───────────────────────

// This block produces NO CSS on its own
%flex-center {
    display        : flex;
    align-items    : center;
    justify-content: center;
}

%visually-hidden {
    position: absolute;
    width   : 1px;
    height  : 1px;
    overflow: hidden;
    clip    : rect(0,0,0,0);
    border  : 0;
}

%button-reset {
    background: none;
    border    : none;
    padding   : 0;
    margin    : 0;
    cursor    : pointer;
    font      : inherit;
    color     : inherit;
}

// ── Extending placeholders in real selectors ──────────────────────────────────

.hero           { @extend %flex-center; min-height: 60vh; }
.modal-overlay  { @extend %flex-center; position: fixed; inset: 0; }
.loading-center { @extend %flex-center; padding: 4rem; }

.sr-only        { @extend %visually-hidden; }
.skip-link      {
    @extend %visually-hidden;
    &:focus {
        position: static;
        clip    : auto;
        width   : auto;
        height  : auto;
    }
}

.icon-btn       { @extend %button-reset; display: inline-flex; }

// ── Compiled CSS (only the extended selectors appear, never the % rules) ───────
// .hero, .modal-overlay, .loading-center { display: flex; align-items: center; justify-content: center; }
// .hero { min-height: 60vh; }
// .sr-only, .skip-link { position: absolute; width: 1px; ... }
// .icon-btn { background: none; border: none; ... display: inline-flex; }