• 15 hours
  • Medium

Free online content available in this course.

course.header.alt.is_video

course.header.alt.is_certifying

Got it!

Last updated on 10/20/20

Choisissez quand utiliser des mixins ou des extensions

Log in or subscribe for free to enjoy all this course has to offer!

Allons plus loin dans notre analyse des mixins et des extensions.

Mixins vs extensions

Sur le principe, les mixins et les extensions sont très semblables. Pour discerner leurs différentes fonctions, il faut prêter attention au code compilé, ce qui complique la tâche pour déterminer la situation dans laquelle utiliser l’un ou l’autre.

Il n’y aura aucun doute possible pour un cas précis : si vous voulez que votre bloc de code utilise ou non des arguments. Si vous avez besoin d’avoir recours à un argument, utilisez des mixins vous n’avez pas d’autre choix.

Les extensions ne tolèrent pas les arguments : puisqu’il n’y a qu’un ensemble de règles compilé, utiliser des arguments pour modifier ses résultats pour un sélecteur les modifierait pour tous les sélecteurs.

Mis à part les arguments, la différence principale entre les mixins et les extensions est qu’avec les mixins vous obtenez des règles dupliquées, alors qu’avec les extensions, vous obtenez des sélecteurs dupliqués.

Du coup, lequel faut-il utiliser ? 😧

Pour avoir une réponse, regardons les sélecteurs dupliqués de l'extend. Si vous scrollez dans votre CSS compilé jusqu’au bloc h1 dans le CSS compilé, tout ce qu’il y a à savoir sur votre bloc h1 s’y trouve. Tout ? Pas vraiment. Vous ne verrez pas ses propriétés typographiques (les fonts, la taille de texte, etc.). Pour connaître ses propriétés typographiques, cherchez au hasard jusqu’à ce que vous les trouviez dans une liste aux côtés d’autres sélecteurs. Le souci, c’est qu'en les trouvant au hasard, vous risquez d’avoir oublié que vous l’aviez étendu avant. Et puisque rien n’indique que vous aviez défini des propriétés typographiques pour h1, que ce soit dans les extensions ou n’importe où ailleurs, vous risquez de vous retrouver perdu et frustré.

Verdict : mixins ou extensions ?

Eh bien en fait, posé comme ça, la réponse est plutôt simple : n’utilisez pas d’extensions.

Je sais, je sais. Les mixins génèrent des tas de code qui se répètent ! Oui, c’est vrai. Mais ils n’affectent pas l’organisation de votre CSS. Les extensions démolissent l’ordre et la prédictibilité de votre codebase et ce, juste pour vous épargner du code répétitif. Le jeu n’en vaut pas la chandelle.

Tenez-vous-en donc aux mixins. Le code que vous obtiendrez sera plus propre et plus simple à maintenir, même s’il est un peu plus volumineux.

Mais, mais… pourquoi ? Pourquoi est-ce qu’on vient de passer tout ce temps sur les extensions ? 😫

Souvenez-vous, tout au début de ce cours, j’ai dit que le CSS était délicat car il n’y a pas de règles concrètes pour son architecture. Ce qui veut dire que d’autres gens auront construit leur écosystème CSS différemment du vôtre, et cela inclut l’utilisation d’extensions.

Être développeur, ce n’est pas seulement écrire son propre code, c’est aussi être capable de lire le code des autres et travailler avec.

Vous tomberez forcément sur des extensions Sass un jour ou l’autre. Même si vous n’en écrivez pas vous-même, les connaître et savoir comment elles fonctionnent est vital pour un développeur Sass. Donc par pitié, ne construisez pas une machine à remonter le temps pour venir vous défouler sur moi au moment où j’écris ce cours ; l’annihilation de l’humanité, tout ça, vous vous rappelez ? Ce ne vaut pas le coup, merci. 🙏🏼

En résumé

  • Les mixins tolèrent les arguments mais génèrent du code répétitif.

  • Les extensions ne tolèrent pas les arguments et génèrent des sélecteurs dupliqués. 

  • Vous tomberez sur des extensions dans du code écrit par d’autres, mais pour que le vôtre reste propre, tenez-vous-en aux mixins.

Maintenant que nous avons tiré tout ça au clair, et puisqu’on a décidé de s’en tenir aux mixins, passons à la vitesse supérieure. Dans le chapitre suivant, nous allons utiliser des fonctionnalités propres à Sass pour passer notre code à un tout autre niveau.

Example of certificate of achievement
Example of certificate of achievement