Formation Le préprocesseur SASS : L'héritage

L'héritage permet de faire en sorte qu'une règle hérite des propriétés d'une autre règle.

.btn {
    padding: 3px 10px;
    background: #000;
    color: #FFF;
    border: solid 1px #CCC;
}

.call-to-action {
    @extend .btn;
    font-size: 1.2em;
}

Qui sera traduit par

.btn, .call-to-action {
    padding: 3px 10px;
    background: #000;
    color: #FFF;
    border: solid 1px #CCC;
}

.call-to-action {
    font-size: 1.2em;
}

Cette approche permet de garde une structure HTML sémantique et d'éviter l'accumulation de classe en rebasculant l'héritage du côté du CSS.

<!-- Héritage en utilisant des classes -->
<div class="btn btn-primary btn-big">

<!-- Classe sémantique, l'héritage sera géré au niveau du CSS -->
<div class="read-more">

En revanche il faudra faire attention car cette approche peut avoir un impact négatif sur le poid de votre CSS si vous héritez d'un sélecteur qui a plusieurs modificateurs.

.btn {
    background: #FFF;
}
.btn:hover {
    background: #000;
}
.theme-vert .btn {
    background: green;
}

.read-more {
    @extend .btn;
}

Sera convertit

.btn, .read-more {
    background: #FFF;
}
.btn:hover, .read-more:hover {
    background: #000;
}
.theme-vert .btn, .theme-vert .read-more {
    background: green;
}