Web Development

Sass/SCSS Extend and Inheritance

Sharing styles with @extend

Basic Extend

.message {
    padding: 10px;
    border: 1px solid #ccc;
}
.success {
    @extend .message; # inherit .message styles
    border-color: green;
}

Placeholder Selectors

%button-base { # placeholder (not output in CSS)
    padding: 10px 20px;
    border-radius: 4px;
}
.btn-primary {
    @extend %button-base; # extend placeholder
    background: blue;
}

Multiple Extends

.error {
    @extend .message;
    @extend %border-thick; # extend multiple
    color: red;
}

Extend vs Mixin

// @extend: shares styles (smaller CSS)
// @mixin: duplicates styles (more flexible)