Extend en Sass

La fonction @extend de Sass permet à une classe d’hériter des styles d’une autre. L'utilité d'une telle architecture est de permettre de créer une classe pilote permettant d'être réutilisable dans d'autres classes.

Voici un exemple d’une classe utilisant la fonction @extend :

.alert {
    padding: .5em;
}

.alert-error {
    @extend .alert;
    color: red;
}

Le résultat en CSS donnerait ceci :

.alert, .alert-error { 
    padding: .5em;
}

.alert-error{
    color: red;
}

C'est facile, non ? Bien sûr la fonction @extend n’est pas limitée qu'aux classes, vous pouvez l'utiliser sur à peu près tous.