CSS: usare i placeholder in SASS

In SASS i placeholder (segnaposto) vengono utilizzati per estendere le classi CSS.

Quando abbiamo più di uno stile in comune con più classi CSS, la soluzione con i placeholder ci permette di definire una sola volta gli stili comuni e quindi di riusarli in più classi.

%msg {
    border: 1px solid;
    padding: 1em;
    margin: 1em 0;
    border-radius: 2px;
}
 
.error {
    @extend %msg;
    color: #d00;
}

.success {
    @extend %msg;
    color: #080;
}

Compilando avremo:

.error, .success {
    border: 1px solid;
    padding: 1em;
    margin: 1em 0;
    border-radius: 2px;
}

.error {
    color: #d00;
}

.success {
    color: #080;
}