Lequel utiliser et quand / Blogs / Perficient

Avez-vous déjà ressenti un pincement au cœur face à la décision d’utiliser un mixin ou d’étendre SCSS ? Tu n’es pas seul. Aujourd’hui, nous partons ensemble pour un voyage, où tu vas découvrez la complexité des mixins et des extensions, et à la fin, vous saurez exactement quand les utiliser. Allons-y, d’accord ?

Mixins dans SCSS : les avez-vous rencontrés ?

Les mixins peuvent être visualisés comme des blocs de code réutilisables. Une fois qu’un style est défini dans un mixin, il peut être invoqué à différents endroits.

Exemple:

Pourquoi utiliser les Mixins ?

1. Adaptabilité: Les mixins offrent la possibilité de modifier facilement les styles
2. Efficacité: Ils restent latents dans votre code jusqu’à ce qu’ils soient invoqués à l’aide d’un @include, garantissant ainsi que le CSS généré reste rationalisé.
3. Conception réactive : La gestion des requêtes multimédias peut devenir difficile. Les mixins prospèrent dans de tels scénarios, garantissant une esthétique cohérente sur différentes tailles d’écran

Qu’est-ce qui s’étend dans SCSS

En utilisant @étendreun style peut hériter des propriétés d’un autre, favorisant ainsi la réutilisation du code.

Exemple:

Pourquoi utiliser Extends ?

1. Optimisation: Si certains styles reviennent fréquemment, @extend aide à réduire la redondance.
2. Sortie élégante : Avec extends, vos sélecteurs CSS finaux sont couplés, ce qui les rend soignés et compréhensibles
3. Sélecteurs d’espace réservé : Ceux-ci restent absents du CSS final jusqu’à ce qu’ils soient invoqués avec un @étendre.

Votre guide de décision :

Utilisez les mixins lorsque :

• Vous vous sentez dynamique et souhaitez des styles qui répondent à différentes entrées
• Vos conceptions comportent plusieurs calques et règles imbriquées
• Si les requêtes des médias rendent la vie difficile

Choisissez les extensions lorsque :

• Vous remarquez que certains styles deviennent des récidivistes
• Votre slogan design du jour est « Gardez les choses uniformes »
• Vous avez pour mission de garder votre CSS final propre, élégant et lisible

Quelques conseils rien que pour vous :

• Méfiez-vous de l’enthousiasme excessif avec @extend. Cela peut rendre vos relations de style complexes.
• Gardez un œil sur la spécificité. Les extensions peuvent parfois jouer des tours sur votre CSS final.

Emballer:

Alors, cher lecteur, les mixins et les extends ont chacun leur propre saveur. Alors que vous vous lancez dans votre prochaine aventure SCSS, n’oubliez pas les informations partagées ici. Et comme toujours, le monde SCSS est à vous, prêt à être coiffé comme vous le souhaitez !

Vous sentez-vous plus éclairé ? J’espère que oui ! Bon apprentissage🌟