Les avantages de l'héritage via @Extend in sass

Les plats clés

• La fonctionnalité @Extend de SASS permet aux cours de partager des propriétés entre elles, simplifiant l'organisation de CSS Styleshets et facilitant la manière efficace des sites Web à grande échelle.
• La fonctionnalité @Extend peut réduire la duplication dans CSS Styleshets et rendre les classes HTML plus propres, gagner des développeurs de temps et des efforts, et rendre la structure CSS plus organisée et plus facile à entretenir.
• Cependant, la prudence est avisée lors de l'utilisation de @Extend car elle peut augmenter considérablement la taille du fichier CSS et les performances d'impact si elles sont utilisées avec négligence. Il ne doit être utilisé que lorsque la classe héritée se rapporte directement à l'objet hérité de.
• SASS est une extension précieuse de CSS qui peut le rendre plus propre, bien structuré et plus facile à développer et à entretenir. Il est recommandé pour ceux qui ne l'ont pas essayé auparavant, mais il doit être utilisé avec soin pour éviter les pièges potentiels.

L'organisation de feuilles de styles CSS est devenue cruciale pour styliser efficacement les sites Web à grande échelle, mais les feuilles de style de nos projets sont devenues plus grandes, plus complexes et plus difficiles à maintenir à mesure qu'elles se développent. C'est là que Sass entre en jeu pour tout simplifier.

Pour ceux qui n'ont pas encore exploré SASS, c'est une extension de CSS. Il nous fournit des fonctionnalités qui n'existent pas dans les CSS natifs tels que les expressions, les variables, la nidification, les mixins (nom de Sass pour les fonctions), l'héritage, et plus encore.

Dans cet article, je vais donner un aperçu de l'héritage dans SASS en utilisant @Extend. Je couvrirai les avantages que cette fonctionnalité apporte et mes expériences lorsque je l'utilise dans mes propres projets. Il est important de noter que @Extend peut être utilisé à mauvais escient, Hugo Giraudel ici à SitePoint a même écrit un article sur la raison pour laquelle vous devriez éviter Sass @Extend. Sachez donc que @Extend peut être un sujet controversé.

Regardez Atoz: Sass Apprenez la lettre Sass par lettre Regardez ce cours Regardez ce cours

Dans les exemples suivants, j'utiliserai la syntaxe SCSS. Il s'agit de la syntaxe qui contient toutes les caractéristiques et la structure de CSS, avec les fonctionnalités supplémentaires de SASS.

Qu'est-ce que @Extend?

@Extend est une fonctionnalité de SASS qui permet aux classes de partager un ensemble de propriétés entre elles. Les sélecteurs qui @Extend une classe dans SASS auront leur sélecteur inclus directement à côté de la classe qu'il étend, ce qui donne une liste séparée par des virgules.

sa syntaxe ressemble à:

<span><span>@extend .class-name;</span></span>

Utilisation

L'utilisation de @Extend ressemble à ainsi:

<span><span>.foo</span> {
</span>  <span>color: black;
</span>  <span>border: 1px solid black;
</span><span>}
</span>
<span><span>.bar</span> {
</span>  <span><span>@extend .foo;</span>
</span>  <span>background-color: red;
</span><span>}</span>

Ceci est compilé pour:

<span><span>.foo, .bar</span> {
</span>  <span>color: black;
</span>  <span>border: 1px solid black;
</span><span>}
</span>
<span><span>.bar</span> {
</span>  <span>background-color: red;
</span><span>}</span>

Dans l'exemple ci-dessus, j'ai défini .foo et .bar qui ont les fonctionnalités suivantes:

• .Bar hérite de .foo, contenant toutes les propriétés de la classe parent .foo.
• .bar étend .foo en ajoutant la couleur de propriété.

Connaissant les bases, nous allons maintenant examiner certains cas d'utilisation pour @Extend.

en utilisant @Extend

Cas d'utilisation 1: duplication

La duplication des propriétés entre les classes est difficile à éviter lors de la mise en place de CSS. Cela peut rendre vos feuilles de style plus compliquées. Par exemple:

<span><span>@extend .class-name;</span></span>

Comme nous pouvons le voir dans l'exemple ci-dessus, .Breakfast, .Lunch et .Dinner contiennent la couleur des propriétés, la bordure, la box-shadow, la marge et le rembourrage avec les mêmes valeurs. Ces propriétés sont dupliquées, ce qui rend notre code en désordre, alors réécrivons-le avec @Extend:

<span><span>.foo</span> {
</span>  <span>color: black;
</span>  <span>border: 1px solid black;
</span><span>}
</span>
<span><span>.bar</span> {
</span>  <span><span>@extend .foo;</span>
</span>  <span>background-color: red;
</span><span>}</span>

Dans le CSS réécrit ci-dessus, nous pouvons voir que l'utilisation de SASS aide notre balisage à devenir plus propre que CSS seul.

Voir la duplication du stylo des propriétés dans SCSS par SitePoint (@SitePoint) sur Codepen.

Cas 2: Déplacer plusieurs classes à partir de HTML

Il y a souvent des cas lors de la conception d'une page où une classe doit avoir tous les styles d'une autre classe. Nous gérons souvent ce cas en utilisant plusieurs noms de classe dans le HTML.

Notre CSS aurait l'air:

<span><span>.foo, .bar</span> {
</span>  <span>color: black;
</span>  <span>border: 1px solid black;
</span><span>}
</span>
<span><span>.bar</span> {
</span>  <span>background-color: red;
</span><span>}</span>

notre HTML pour ce CSS:

<span><span>.breakfast</span> {
</span>  <span>color: #333;
</span>  <span>border: 1px solid #bbb;
</span>  <span>box-shadow: 1px 1px 0 #ddd;
</span>  <span>margin: 0 0 10px;
</span>  <span>padding: 15px;
</span><span>}
</span>
<span><span>.lunch</span> {
</span>  <span>background-color: yellow;
</span>  <span>color: #333;
</span>  <span>border: 1px solid #bbb;
</span>  <span>box-shadow: 1px 1px 0 #ddd;
</span>  <span>margin: 0 0 10px;
</span>  <span>padding: 15px;
</span><span>}
</span>
<span><span>.dinner</span> {
</span>  <span>background-color: orange;
</span>  <span>color: #333;
</span>  <span>border: 1px solid #bbb;
</span>  <span>box-shadow: 1px 1px 0 #ddd;
</span>  <span>margin: 0 0 10px;
</span>  <span>padding: 15px;
</span><span>}</span>

Dans l'exemple ci-dessus, nous avons deux classes dans notre

. Imaginez à quel point ce serait désordonné si nous avions plusieurs cours:

<span><span>.meal-box</span> {
</span>  <span>color: #333;
</span>  <span>border: 1px solid #bbb;
</span>  <span>box-shadow: 1px 1px 0 #ddd;
</span>  <span>margin: 0 0 10px;
</span>  <span>padding: 15px;
</span><span>}
</span>
<span><span>.breakfast</span> {
</span>  <span><span>@extend .meal-box;</span>
</span><span>}
</span>
<span><span>.lunch</span> {
</span>  <span><span>@extend .meal-box;</span>
</span>  <span>background-color: yellow;
</span><span>}
</span>
<span><span>.dinner</span> {
</span>  <span><span>@extend .meal-box;</span>
</span>  <span>background-color: orange;
</span><span>}</span>

Le code HTML ci-dessus pourrait devenir assez complexe. Certains développeurs Web le préfèrent de cette façon, mais je préfère l'héritage dans mes styles SASS:

<span><span>.candy</span> {
</span>  <span>background-color: black;
</span>  <span>border: 1px solid red;
</span>  <span>box-shadow: 1px 1px 0 #ddd;
</span>  <span>padding: 15px;
</span><span>}
</span>
<span><span>.strawberry-candy</span> {
</span>  <span>background-color: #ff6666;
</span>  <span>color: white;
</span><span>}</span>

Avec notre HTML qui ressemble maintenant à:

<span><span><span><div</span> class<span>="candy strawberry-candy"</span>></span>
</span>  This is the strawberry candy!
<span><span><span></div</span>></span></span>

Cette fois, nous n'avons besoin que d'une classe. Tous les styles définis pour la classe .Candy sont également appliqués à la classe.

Voir le stylo déplacer plusieurs classes de HTML avec @Extend par SitePoint (@SitePoint) sur codepen.

Cas 3: Extension des sélecteurs complexes

Les sélecteurs de classe ne sont pas les seules choses qui peuvent être étendues. Nous pouvons également étendre des sélecteurs complexes en un seul élément, comme a: Hover, .parentClass.childClass et ainsi de suite. Par exemple:

<span><span><span><div</span> class<span>="candy strawberry-candy sugar-free-candy free-candy"</span>></span>
</span>  This is just an example
<span><span><span></div</span>></span></span>

Ceci est compilé pour:

<span><span>.candy</span> {
</span>  <span>background-color: black;
</span>  <span>border: 1px solid red;
</span>  <span>box-shadow: 1px 1px 0 #ddd;
</span>  <span>padding: 15px;
</span><span>}
</span>
<span><span>.strawberry-candy</span> {
</span>  <span><span>@extend .candy;</span>
</span>  <span>background-color: #ff6666;
</span>  <span>color: white;
</span><span>}</span>

que nous pouvons ensuite utiliser dans notre HTML comme ceci:

<span><span><span><div</span> class<span>="strawberry-candy"</span>></span>
</span>  This is the very sweet candy!
<span><span><span></div</span>></span></span>

Voir les sélecteurs complexes étendants du stylo avec @Extend par SitePoint (@SitePoint) sur Codepen.

Avantages de @Extend

En parcourant les exemples ci-dessus, nous pouvons voir plusieurs avantages de l'héritage via @Extend. Ceux-ci incluent:

Classes HTML plus propres

Comme vous pouvez le voir dans la deuxième étude de cas, l'utilisation de tant de classes dans un élément peut rendre difficile la détermination de la cause profonde si vous rencontrez des problèmes. La structure des balises HTML n'est pas non plus très belle et propre.

De mon point de vue lors de la fabrication d'un bon produit, nous considérons non seulement la perspective de l'utilisateur final mais aussi la qualité de notre stratégie de développement. Par conséquent, @Extend nous aide à structurer nos classes de manière plus propre au sein de chaque élément HTML.

Réduire la duplication de CSS

Dans le développement Web, nous avons toujours une duplication dans nos styles CSS. Par conséquent, la réutilisation du code source CSS écrit peut être extrêmement nécessaire. @Extend peut nous aider à réutiliser notre CSS lorsqu'il est approprié et plus propre à le faire.

Économiser du temps et des efforts

Avec les deux avantages susmentionnés, les développeurs peuvent économiser du temps et des efforts pendant le développement.

Les développeurs peuvent réutiliser CSS pour divers éléments, réduisant l'effort nécessaire pour trouver la cause profonde des problèmes CSS et rendre leur structure CSS agréable et propre.

Cependant, l'utilisation de @Extend n'est pas sans ses dangers. Les avantages ci-dessus ne s'appliquent que lorsque @Extend est utilisé avec soin - il peut être surutilisé provoquant l'effet inverse.

les dangers de @Extend

J'ai appliqué @Extend dans mes propres projets et je dois fournir un mot de prudence lors de l'utilisation de @Extend. Vous devez être prudent.

@Extend peut augmenter considérablement la taille de votre fichier CSS et avoir un impact considérable sur les performances de votre CSS lorsqu'il est utilisé sans soin. J'avais ma part de douleur dans une situation comme celle-ci et j'ai passé beaucoup de temps à refactoriser l'utilisation de @Extend par mon sass. Voici un exemple de la façon dont j'ai initialement utilisé @Extend incorrectement:

Exemple:

<span><span>@extend .class-name;</span></span>

est compilé à:

<span><span>.foo</span> {
</span>  <span>color: black;
</span>  <span>border: 1px solid black;
</span><span>}
</span>
<span><span>.bar</span> {
</span>  <span><span>@extend .foo;</span>
</span>  <span>background-color: red;
</span><span>}</span>

Dans cet exemple, .Base-CSS est une classe avec de nombreuses classes héréditaires basées sur elle. Si vous jetez un œil à l'exemple, vous pouvez voir que les classes héritées ne sont pas liées les unes aux autres. J'ai .btn pour mes boutons et mon. Si j'ai 100 classes héritées de .Base-CSS, les sélecteurs qui ont des caractéristiques .Base-CSS augmenteront. Cela complique considérablement et inutilement notre résultat final CSS. De plus, cela rend plus difficile de vérifier les propriétés de chaque sélecteur.

Après avoir ré-factorisé mon SASS, j'ai réalisé que nous ne devons utiliser @Extend que lorsque la classe héritée se rapporte directement à l'objet dont nous héritons. Il devrait s'agir d'une variation de l'objet ou du style, plutôt qu'une règle de couverture pour de nombreux éléments non liés. Pour l'héritage comme mon exemple ci-dessus, nous devons compter sur les capacités existantes de CSS pour en faire cascade nos styles en éléments enfants.

<span><span>.foo, .bar</span> {
</span>  <span>color: black;
</span>  <span>border: 1px solid black;
</span><span>}
</span>
<span><span>.bar</span> {
</span>  <span>background-color: red;
</span><span>}</span>

est compilé à:

<span><span>@extend .class-name;</span></span>

Nous pouvons voir que l'exemple ci-dessus est beaucoup plus correct et raisonnable. Nous avons réduit la portée en appliquant @Extend uniquement aux classes qui devraient hériter les unes des autres en raison d'une variation d'un type d'objet. Par exemple, les styles ci-dessus sont tous liés à différents types de boutons.

Conclusion

Sass est une extension précieuse qui peut améliorer notre CSS pour le rendre plus propre, bien structuré, organisé et facile à développer et à entretenir. Si vous n'avez pas essayé Sass auparavant, je le recommande vivement. Lorsque vous vous sentez plus à l'aise avec les bases de SASS, nous vous recommandons de lire l'article de sitepoint de Hugo Giraudel sur ce que personne ne vous a dit sur @Extend de Sass. Nous avons également un guide de référence SASS entier à la référence SASS de SitePoint avec de nombreux exemples à explorer.

Merci à Steve et Ezekiel dans les commentaires pour avoir ramassé une erreur dans la première version de ce post, il a depuis été mis à jour.

Questions fréquemment posées (FAQ) sur l'héritage via Extend in Sass

Quel est le principal avantage de l'utilisation de @Extend dans SASS?

Le principal avantage de l'utilisation de @Extend dans SASS est qu'il permet la réutilisabilité du code, ce qui conduit à un code plus propre et plus maintenable. Il permet à une classe de hériter des styles d'une autre classe, réduisant ainsi la nécessité d'écrire du code répétitif. Cela rend non seulement le code plus lisible, mais réduit également la taille du fichier, ce qui peut améliorer le temps de chargement d'une page Web.

En quoi @Extend diffère-t-il de @Mixin dans Sass?

Bien que les deux sont les deux @Extend et @Mixin dans SASS permettent la réutilisabilité du code, ils fonctionnent de différentes manières. @Extend permet à un sélecteur de hériter des styles d'un autre sélecteur, tandis que @Mixin comprend un bloc de styles qui peuvent être réutilisés tout au long de la feuille de style. La principale différence est que @Extend génère moins de sortie CSS car il regroupe les sélecteurs avec les mêmes styles ensemble, tandis que @Mixin peut conduire à plus de sortie CSS car il reproduit les styles à chaque fois qu'il est inclus.

Puis-je utiliser @Extend avec des sélecteurs complexes dans SASS?

Oui, vous pouvez utiliser @Extend avec des sélecteurs complexes dans SASS. Cependant, il est important de noter que @Extend ne fonctionnera qu'avec des sélecteurs qui sont présents dans le même fichier. Il ne fonctionnera pas avec des sélecteurs définis dans un fichier différent ou ceux qui sont générés par un @Mixin ou une fonction.

Pourquoi est-ce que je reçois une erreur lorsque je utilise @Extend dans une requête multimédia dans Sass?

Dans SASS, vous ne pouvez pas utiliser @Extend dans une requête multimédia pour étendre une classe définie à l'extérieur de la requête multimédia. En effet, @Extend fonctionne en regroupant des sélecteurs avec les mêmes styles ensemble, et il ne peut pas le faire sur différents blocs de requête multimédia. Pour contourner cela, vous pouvez définir la classe que vous souhaitez étendre dans le même bloc de requête multimédia.

Puis-je utiliser @Extend dans une règle imbriquée dans SASS?

Oui, vous pouvez utiliser @Extend dans une règle imbriquée dans SASS. Cependant, il est important de noter que le sélecteur étendu sera inséré au niveau supérieur de la feuille de style, et non dans la règle imbriquée. En effet, SASS suit la règle CSS selon laquelle tous les sélecteurs doivent être au niveau supérieur d'un document.

Comment puis-je éviter que les «directives d'étendue ne puissent être utilisées que dans les règles» dans l'erreur Sass?

Cette erreur se produit lorsque vous essayez d'utiliser @Extend en dehors d'une règle définie dans SASS. Pour éviter cette erreur, assurez-vous que vous utilisez @Extend dans un ensemble de règles. Par exemple, au lieu d'écrire «@Extend .class;», vous devriez écrire «.new-Class {@Extend .Class; } ”.

Puis-je utiliser @Extend avec des pseudo-classes dans sass?

Oui, vous pouvez utiliser @Extend avec des pseudo-classes dans SASS. Cependant, il est important de noter que @Extend ne fera que prolonger les styles de la pseudo-classe, pas la pseudo-classe elle-même. Cela signifie que si vous utilisez «@Extend: Hover;», il n'ajoutera pas d'effet de survol au sélecteur, mais étendra plutôt les styles de la pseudo-classe:

pourquoi est mon @Extend Ne fonctionne pas dans Sass?

Il pourrait y avoir plusieurs raisons pour lesquelles votre @Extend ne fonctionne pas dans SASS. Une raison courante est que le sélecteur que vous essayez d'étendre n'est pas présent dans le même fichier. Une autre raison pourrait être que vous essayez d'étendre un sélecteur dans une requête médiatique ou une règle imbriquée, qui n'est pas autorisée dans SASS. Assurez-vous de vérifier ces points si votre @Extend ne fonctionne pas.

Puis-je utiliser @Extend avec plusieurs classes dans SASS?

Oui, vous pouvez utiliser @Extend avec plusieurs classes dans SASS. Vous pouvez le faire en séparant les classes avec une virgule. Par exemple, «.new-Class {@Extend .class1, .class2; } ”Étendra les styles de .class1 et .class2.

est-il possible de remplacer les styles d'une classe étendue dans Sass?

Oui, il est possible de remplacer les styles de Une classe prolongée dans SASS. Vous pouvez le faire en définissant les nouveaux styles après la directive @Extend. Les nouveaux styles remplaceront les styles de la classe étendue pour le sélecteur qui utilise @Extend.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!