@Extend et héritage dans SASS | Expliqué

La rédaction d'un code CSS propre et lisible qui ne répète pas les valeurs redondantes est absolument possible en utilisant une feuille de style syntaxiquement impressionnante (SASS). Tout en stylisant des éléments sur une page Web, nous rencontrons souvent une situation où les éléments sont stylisés de manière similaire ne diffèrent que dans les détails mineurs. La rédaction d'une feuille de style pour de tels éléments pourrait s'avérer très mouvementée car la quantité de valeurs redondantes serait énorme. Pour éviter de telles situations, Sass fournit la règle @Extend. Ce message traite de cette règle en détail.

Règle et héritage SASS @Extend

Lorsque vos éléments sont stylisés de manière similaire qui ne diffèrent que des détails mineurs, vous voudriez hériter des propriétés similaires d'un élément à un autre. Ceci est possible en utilisant la règle @Extend qui vous permet de hériter des propriétés utilisées pour un sélecteur à un autre.

Essayons de comprendre cette règle et comment cela aide à hériter des propriétés CSS similaires à l'aide d'un exemple.

Exemple

Dans l'exemple ci-dessous, nous supposons qu'il existe plusieurs messages qui apparaissent sur notre site Web tels que le message d'erreur, le message d'avertissement, le message de réussite, etc. Dans le but de styliser ces éléments, nous définissons d'abord une classe .Standard messages qui contient toutes les propriétés qui sont redondantes pour tous les types de messages apparaissant sur notre site Web.

Toupet

.Message-standard
rembourrage: 5px;
Border: 2px gris massif;
Texte-aligne: Centre;
Couleur blanche;

Maintenant, c'est le style de base que tous les messages auront quel que soit leur type. Maintenant, quand il s'agit de styliser ces messages séparément, vous pouvez hériter de ces propriétés du .classe standard de message ainsi que la rédaction d'autres propriétés de style pour chaque type de message.

Toupet

.Message-error
@étendre .Message-standard;
Color en arrière-plan: bleu;

.aval de messages
@étendre .Message-standard;
Color d'arrière-plan: rouge;

.Succès de message
@étendre .Message-standard;
Color en arrière-plan: vert;

Vous pouvez maintenant remarquer que dans l'extrait de code ci-dessus, nous avons utilisé la règle @Extend pour hériter des propriétés de la .Classe de messages pour styliser chaque type de message, donnant à chacun une couleur d'arrière-plan différente. Cela peut économiser beaucoup de temps et d'énergie et le nombre de lignes de code réduit.

Le fichier de sortie CSS résultant ressemblera à ceci.

.de messages, .erreur de message, .avance de messages, .Succès de message
rembourrage: 5px;
Border: 2px gris massif;
Texte-aligne: Centre;
Couleur blanche;

.Message-error
Color en arrière-plan: bleu;

.aval de messages
Color d'arrière-plan: rouge;

.Succès de message
Color en arrière-plan: vert;

Lorsque vous faites référence à ces classes dans votre code HTML, il n'est pas nécessaire de vous référer à plusieurs classes, vous pouvez simplement utiliser les classes attribuées à chacun des messages. Par exemple, n'utilisez pas ceci

, Utilisez simplement ça

.

Conclusion

La règle @Extend dans SASS vous permet de hériter de propriétés similaires lorsque vos éléments sont stylisés de manière similaire ne diffèrent que des détails mineurs. Vous pouvez définir le style de base de ces éléments dans une classe, puis hériter de cette classe en utilisant la règle @Extend dans d'autres classes ainsi qu'un style supplémentaire pour cet élément particulier. L'utilisation de cette règle peut gagner beaucoup de temps et réduire les lignes de code, ce qui rend votre code propre.