Try It Yourself - SyntaxStudy Editor

HTML / CSS / JS

// ── Basic @extend ─────────────────────────────────────────────────────────────

.message {
    padding      : 1rem 1.25rem;
    border-radius: 4px;
    border       : 1px solid transparent;
    font-size    : 0.9375rem;
    line-height  : 1.5;
}

.message-success {
    @extend .message;
    background  : #d4edda;
    border-color: #c3e6cb;
    color       : #155724;
}

.message-error {
    @extend .message;
    background  : #f8d7da;
    border-color: #f5c6cb;
    color       : #721c24;
}

.message-warning {
    @extend .message;
    background  : #fff3cd;
    border-color: #ffeeba;
    color       : #856404;
}

// Compiled output — selectors are grouped, declarations appear once:
// .message, .message-success, .message-error, .message-warning {
//     padding: 1rem 1.25rem; border-radius: 4px; ...
// }
// .message-success { background: #d4edda; ... }
// .message-error   { background: #f8d7da; ... }
// .message-warning { background: #fff3cd; ... }

// ── Extending chained selectors ───────────────────────────────────────────────
.btn-base {
    display    : inline-block;
    cursor     : pointer;
    font-weight: 600;
}

.btn-primary {
    @extend .btn-base;
    background: #3498db;
    color     : #fff;
}