• 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 8/4/20

Écrivez du code plus propre grâce aux extensions Sass

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

Appréhendez les points faibles des mixins pour mieux les contourner.

Les mixins sont utiles, certes, mais elles ont aussi quelques inconvénients. En effet, chaque mixin crée une duplication de l’ensemble de règles dans notre CSS compilé :

.form{
&__heading {
@include heading-shadow;
}
}
.about{
&__heading {
@include heading-shadow;
}
}
.project{
&__heading{
@include heading-shadow;
}
}
.form__heading {
text-shadow: 0.55rem 0.55rem #15DEA5;}
.about__heading {
text-shadow: 0.55rem 0.55rem #15DEA5;
}
.project__heading {
text-shadow: 0.55rem 0.55rem #15DEA5;
}

Alerte aux répétitions 🚨 !  Et la mixin heading-shadow contient le strict minimum : une propriété. Mais ce n’est pas toujours le cas. Par exemple, si on crée une mixin pour un ensemble de règles, on en obtient beaucoup plus :

@mixin .typography {
color: $colour-primary;
font-size: 2rem;
font-weight: 100;
line-height: 1.7;
}

Et il pourrait y en avoir encore plus :  font-kerning,  line-height,  text-transfor, etc., etc. Maintenant, supposons qu’on inclue plusieurs fois cette mixin typography. Quand on regarde notre Sass, il paraît plutôt correct :

@mixin .typography {
color: $colour-primary;
font-size: 2rem;
font-weight: 100;
line-height: 1.7;
}
h1 {
@include .typography;
}
textarea {
@include .typography;
}
button {
@include .typography;
}
input {
@include .typography;
}

Mais quand on jette un œil au CSS compilé, on voit qu’il contient beaucoup de code répétitif (alerte, alerte ! 🚨) :

h1 {
color: #15dea5;
font-size: 2rem;
font-weight: 100;
line-height: 1.7;
}
textarea {
color: #15dea5;
font-size: 2rem;
font-weight: 100;
line-height: 1.7;
}
button {
color: #15dea5;
font-size: 2rem;
font-weight: 100;
line-height: 1.7;
}
input {
color: #15dea5;
font-size: 2rem;
font-weight: 100;
line-height: 1.7;
}

Trouver un bout de code précis devient un enfer au vu des multiples répétitions. Il sera d’autant plus difficile de le trouver au milieu de tous les blocs qui se ressemblent. Et le doigt qui vous sert à scroller aimerait autant ne pas être trop surexploité.*

Je vous entends venir, vous pourriez transformer votre mixin de changement typographique en un sélecteur  .typography  et l’assigner aux éléments qui en ont besoin dans le HTML :

.typography {
color: $colour-primary;
font-size: 2rem;
font-weight: 100;
line-height: 1.7;
}
<h1 class="heading__header typography">Heading Goes Here</h1>
...
<button class="btn typography">Click Me!</button>
...

Mais cela met complètement en l’air les conventions de nomenclature BEM. Reprenons, une mixin produit de grandes quantités de codes répétitifs, et un sélecteur normal ne sera pas compatible avec BEM. Un sacré dilemme… Eh bien, pas forcément : on peut trouver un juste milieu grâce *roulements de tambours* aux extensions Sass

Utilisez les extensions Sass

Les extensions sont très similaires aux mixins. Vous écrivez un bloc de code et vous comptez sur Sass pour le réutiliser, ce qui nous épargne la tâche de devoir le retaper indéfiniment. Mais contrairement aux mixins, pas besoin de les déclarer avec un identifiant spécifique – il suffit de les écrire comme un simple sélecteur :

.typography {
color: #15dea5;
font-size: 2rem;
font-weight: 100;
line-height: 1.7;
}

Ensuite, pour étendre un sélecteur à  .typography, tapez @extend suivi du nom du sélecteur,  .typography  :

.typography {
color: $colour-primary;
font-size: 2rem;
font-weight: 100;
line-height: 1.7;
}
h1 {
@extend .typography;
}
Essayez par vous-même !

Dans cet exercice, reprenez ce que vous avez vu dans ce chapitre en unifiant la typographie de deux blocs grâce aux extensions.

Coding application
Houston... ?
It seems you're not connected to the internet.
You are not signed in

Sign in to access coding exercises and test your new skills.

Make sure to practice in this chapter before moving on.

Utilisez les placeholders

Vous avez remarqué que j’ai dit “étendre à” et pas juste “étendre” dans le paragraphe ci-dessus ? C’est parce que vous n’êtes pas en train d’étendre le sélecteur  .typography-content ! Vous êtes en train d’étendre le sélecteur h1 au sélecteur  .typography.

Ok, mais ça veut dire quoi, au juste ? 😧

Regardons le CSS compilé pour y voir un peu plus clair :

.typography, h1 {
color: #15dea5;
font-size: 2rem;
font-weight: 100;
line-height: 1.7;
}

Notez que vous ne voyez pas de code issu de l’extension au sein du sélecteur h1, mais que Sass a ajouté h1 à la liste des sélecteurs pour l’ensemble de règles.

Avec les mixins, Sass inclut le contenu du mixin partout où il est appelé, ce qui a pour conséquence un tas de répétitions. Mais si vous utilisez @extend sur h1, vous dites à Sass que plutôt que de dupliquer les propriétés au sein de h1, vous voulez que h1 utilise l’ensemble de règles issu d’un autre sélecteur – dans le cas présent,  .typography. Du coup, Sass “étend” h1 aux règles de  .typography dans toute la feuille de style et l’ajoute à la liste.

Si vous déployez @extend  .typography dans plein d’autres sélecteurs, vous ne vous retrouverez pas avec des tas de règles dupliquées. À la place, tous les sélecteurs concernés seront ajoutés à la liste aux côtés de  .typography  :

.typography {
color: $colour-primary;
font-size: 2rem;
font-weight: 100;
line-height: 1.7;
}
h1 {
@extend .typography;
}
textarea {
@extend .typography;
}
button {
@extend .typography;
}
input {
@extend .typography;
}
.typography, h1, textarea, button, input {
color: #15dea5;
font-size: 2rem;
font-weight: 100;
line-height: 1.7;
}

Quand vous regardez la liste des sélecteurs qui suivent  .typography, vous voyez beaucoup d’éléments que nous utilisons déjà un peu partout dans notre code mais pas  .typography. C’est parce que son but n’est pas de modifier un élément, mais plutôt de servir de placeholder (ou de terrain de base, si on veut) pour d’autres sélecteurs auxquels il doit être étendu.

Okay ; donc, en suivant cette logique on pourrait décider de renommer .typography par  .placeholder-typography  , mais avoir dans son CSS des sélecteurs qui ne sont utilisés nulle part est une mauvaise idée 🔥. Les sélecteurs inutilisés augmentent la taille de votre fichier et ajoutent de la confusion inutilement. Ce n’est pas notre but. En plus, ils pourraient sérieusement vous compliquer la tâche le jour où vous aurez besoin de déchiffrer ce qui se passe.

N’oublions pas que nous essayons de faire en sorte que votre futur vous soit content, ne serait-ce que pour lui éviter de construire une machine à voyager dans le temps pour revenir se venger, et ce au risque de créer une faille spatiotemporelle qui aurait pour inévitable conséquence d’annihiler le reste de l’humanité.

L’humanité vous remercie donc pour vos efforts.

Comment faire pour utiliser  .typography  et pour l’étendre aux autres classes sans le déclarer comme un sélecteur ? Sass à la rescousse ! 🏋️‍♀️ Sass a un placeholder intégré prêt à l’emploi, que vous pouvez utiliser pour contenir votre ensemble de règles et garder un code propre et ordonné plutôt que d’utiliser un sélecteur standard ; il se matérialise avec le préfixe % :

%typography {
color: $colour-primary;
font-size: 2rem;
font-weight: 100;
line-height: 1.7;
}

Lorsque vous utilisez le préfixe pourcentage (%) devant votre sélecteur plutôt que le point qu’on utilise d’habitude pour les classes, Sass crée un placeholder.

On peut créer des extensions aux placeholders Sass, aussi appelés “classes silencieuses”, de la même façon qu’on le fait avec les sélecteurs. On peut réutiliser nos placeholders partout dans le code, comme on le ferait avec des sélecteurs.

%typography {
color: $colour-primary;
font-size: 2rem;
font-weight: 100;
line-height: 1.7;
}
h1 {
@extend %typography;
}
textarea {
@extend %typography;
}
button {
@extend %typography;
}
input {
@extend %typography;
}

En n’appliquant que les sélecteurs qui s’étendent au placeholder, votre CSS devient plus propre et plus explicite. Aucune confusion et pas de code dupliqué : jackpot ! 🙌

Essayez par vous-même !

Dans cet exercice, créez et utilisez les placeholders.

Coding application
Houston... ?
It seems you're not connected to the internet.
You are not signed in

Sign in to access coding exercises and test your new skills.

Make sure to practice in this chapter before moving on.

En résumé

  • Les extensions ont une fonction similaire aux mixins : tous deux vous épargnent d’écrire de nombreuses lignes de code répétitives.

  • Alors que les mixins se compilent en ensembles de règles dupliqués, les extensions se compilent en sélecteurs dupliqués.

  • Pour éviter la présence de sélecteurs inutilisés dans votre codebase, vous pouvez utiliser des placeholders d’ensembles de règles en préfixant leur nom d’un symbole pourcent (%) : %extend-placeholder.

Pas mal, non ? Mais quand faut-il utiliser des mixins plutôt que des extensions et vice versa ? Dans le chapitre suivant, nous allons voir et essayer de comprendre ensemble les similitudes et les différences entre les deux.

Example of certificate of achievement
Example of certificate of achievement