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;
}
