• 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 2/24/20

Utilisez les mixins Sass avec des arguments

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

Allons encore plus loin pour structurer notre code avec les mixins.

Découvrez les mixins avec Sass

Attends attends deux secondes, on dit un ou une mixin ?

En programmation objet, on dit un ensemble de règles, donc un mixin ; mais une règle, c’est une mixin. Ici on parlera de la mixin en tant que règle (entre nous, en anglais on ne donne pas de genre, donc bon, on va pas chipoter 😉).

Dans notre CSS, nous utilisons beaucoup de texte ombré. Et avec tous les différents arguments auxquels on doit l’appliquer, on obtient un bon paquet de  répétitions : alerte aux répétitioooooons ! 🚨

.heading__header {
  text-shadow: 0.55rem 0.55rem #fff;
}
.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;
}

👆Vous voyez que text-shadow est dupliqué dans tous les sélecteurs où on en a besoin.

Rappelez vous : ce que l’on veut, c’est du code plus simple et mieux organisé !

.heading__header {
  text-shadow: 0.55rem 0.55rem #fff;
}
.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;
}

Si on reprend notre code : alerte aux répétitions ! 🚨 La solution la plus simple serait de tout caser dans une variable, non ?

$heading-shadow: text-shadow: 0.55rem 0.55rem #15DEA5;

Malheureusement non, les variables ne peuvent stocker que des valeurs. 😓 Mais pas d’inquiétude ! Sass a donné aux variables une grande sœur, et elle est parfaitement adaptée à la situation : la @mixin Sass !

Gérez les paramètres du mixin

Plutôt que d’être limités à des valeurs, les mixins stockent des blocs entiers de code. 🤘 Vous pouvez les utiliser pour stocker des ensembles de règles CSS que vous utilisez fréquemment, comme avec une variable :

@mixin mixin-name {
  css-property: value;
}

Ça ressemble beaucoup au fait d'écrire un bloc CSS standard, non ? Sauf peut-être pour le nom. Là encore, il vaut mieux éviter d’être trop spécifique quand on donne un nom à une mixin, faites plutôt référence à son rôle. Puisque tous les éléments sur lesquels on met une ombre sont des headers, nommez-le heading-shadow (ombre du heading).

@mixin heading-shadow

À partir de là, c’est la même chose que d’écrire un bloc CSS normal. Utilisez des accolades pour entourer ce que vous voulez mettre dans votre ensemble de règles. Dans le cas de la mixin heading-shadow, il s’agit de la propriété text-shadows et de ses paramètres :

@mixin heading-shadow{
  text-shadow: .55rem .55rem #15DEA5;
}

Et voilà votre première mixin Sass ! 👏 Cependant, comme pour les variables, votre heading-shadow ne fera pas grand-chose tant que vous ne l’aurez pas inclus dans le bloc CSS où vous voulez qu’il y ait une ombre.

Dans le cas présent, nous voulons ajouter une ombre dans notre sélecteur  .form__heading, ce que nous faisons en tapant @include suivi d’un espace et du nom de notre mixin :

.form {
  &__heading {
      @include heading-shadow;
  }
}

Et lorsque Sass compile cela en CSS, il place l’ensemble de règles issues de la mixin directement dans le bloc dans lequel nous l’avons inclus :

.form__heading {
  text-shadow: .55rem .55rem #15DEA5;
}

Tant qu’on y est, remplaçons à présent les autres instances d’ombres :

.heading{
  &__header {
  text-shadow: 0.55rem 0.55rem #fff;
  }
}
.form{
  &__heading {
      @include heading-shadow;
  }
}
.about{
  &__heading {
      @include heading-shadow;    
  }
}
.project{
  &__heading{
      @include heading-shadow;
  }
}

Et voilà, des ombres en veux-tu en voilà :

.heading__header {
text-shadow: 0.55rem 0.55rem #fff;
}
.form__heading {
text-shadow: .55rem .55rem #15DEA5;
}
.about__heading {
text-shadow: .55rem .55rem #15DEA5;
}
.project__heading {
text-shadow: .55rem .55rem #15DEA5;
}

Essayez par vous-même !

Dans cet exercice, pratiquez et créez une mixin qui contiendra les règles des bordures.

https://api.next.tech/api/v1/publishable_key/2A9CAA3419124E3E8C3F5AFCE5306292?content_id=2ea510ba-003e-4552-b14a-83f314517237

Customisez la valeur par défaut de la mixin

Voilà, vous avez remplacé tous les textes ombrés grâce à votre mixin. Enfin, pas tout à fait. Il reste un texte ombré : l’en-tête dans votre header qui utilise aussi un text-shadow, mais la couleur n’est pas la même que dans votre mixin heading-shadow ; vous ne pouvez donc pas l’utiliser.

.heading__header {
text-shadow: 0.55rem 0.55rem #fff;
}

Enfin, pas encore…

L’en-tête dans votre header doit avoir un texte ombré blanc et non vert
L’en-tête dans votre header doit avoir un texte ombré blanc et non vert
.heading{
  &__header {
  // This shadow has a white colour, not mint!
  text-shadow: 0.55rem 0.55rem #fff;
  }
}

Ça ne vaut pas le coup de créer une mixin juste pour une seule instance. Rappelez-vous : travaillez mieux, pas plus. Au lieu de ça, vous pouvez modifier votre mixin pour qu’il se comporte différemment selon ses inputs.

Vous avez dit inputs ? 🤔

Absolument ! Si vous placez des parenthèses après le nom de votre mixin mais avant les accolades, et qu’entre ces parenthèses vous mettez un argument (ou plusieurs), votre mixin devient customisable 🤩 :

@mixin heading-shadow($colour){
  text-shadow: .55rem .55rem #15DEA5;
}

$colour ressemble fort à une variable, non ? C’est l’argument. Voyez les arguments comme des variables vides qui ne vivent que dans la mixin. Vous fixez leur valeur à chaque fois que vous placez la mixin dans votre code, et cette valeur est utilisée dans le bloc du mixin quand il est compilé en CSS :

@mixin heading-shadow($colour){
  text-shadow: .55rem .55rem $colour;
}

Sass remplacera la variable $colour au sein de la mixin avec la valeur de couleur que vous indiquez, créant ainsi une ombre de la couleur voulue pour le header de l’en-tête.

.heading{
  &__header {
  @include heading-shadow(#fff);
  }
}

Et quand vous regardez le code CSS compilé, le header de l’en-tête a bien une ombre blanche !

.heading__header {
text-shadow: 0.55rem 0.55rem #fff;
}

Définissez une valeur

Désormais, vous pouvez utiliser text-shadows avec la couleur que vous voulez et ce, en customisant la couleur une seule fois.

Pour toutes les autres instances, le $colour-primary  originel aurait très bien fait l’affaire.

Plutôt que de renseigner une valeur de couleur chaque fois que vous utilisez votre mixin heading-shadow, vous pouvez régler la valeur par défaut de l’argument. Si vous décidez de ne pas customiser la couleur de l’ombre, c’est la couleur par défaut qui sera utilisée. Vous pouvez le faire en définissant sa valeur de la même manière que pour une variable déclarée normalement :

@mixin heading-shadow($colour: $colour-primary){
  text-shadow: .55rem .55rem $colour;
}

Du coup, si vous oubliez d’ajouter l’argument ou d’assigner une couleur à la variable quand vous l’incluez, Sass en déduira que vous voulez que l’ombre soit celle de la couleur par défaut, dans notre cas $colour-primary.

Dans le cas où vous n’auriez pas défini de valeur par défaut pour $colour, vous auriez dû aller ajouter dans les arguments toutes les autres inclusions de heading-shadow. Mais plus besoin de vous inquiéter, grâce à la couleur par défaut, vous pouvez les laisser tels quels :

.heading{
  &__header {
      @include heading-shadow($colour-white);
  }
}
.form{
  &__heading {
      @include heading-shadow;
  }
}
.about{

   &__heading {
      @include heading-shadow;    
  }
}
.project{
  &__heading{
      @include heading-shadow;
  }
}

Ce qui donne une fois compilé :

.heading__header {
text-shadow: 0.55rem 0.55rem #fff;
}
.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;
}

Parfait ! Vous avez transformé votre mixin heading-shadow en un bloc de code qui s’adapte aux besoins de votre codebase. 🙌

Essayez par vous-même !

À présent, nous allons reprendre notre mixin du dernier exercice tout en l’améliorant pour qu’elle puisse être utilisée, peu importe la couleur de la bordure que l’on souhaite appliquer.

https://api.next.tech/api/v1/publishable_key/2A9CAA3419124E3E8C3F5AFCE5306292?content_id=dd319aa7-475c-4bc2-980a-d1ee2afdb570

Allez plus loin en sophistiquant vos mixins

Votre mixin a une bonne tête. Vous pouvez customiser la couleur au gré de vos besoins ou la laisser telle quelle pour que ce soit la valeur par défaut qui soit utilisée. Mais il y a encore quelques petites choses que vous pouvez faire pour améliorer tout ça. Idéalement, les valeurs de couleur et de taille doivent être contenues dans des variables, pour qu’elles soient faciles à trouver et à modifier si nécessaire. Mais la mixin utilise des valeurs fixes pour la taille de l’ombre sur le texte. Remédions à cela en déclarant une variable $heading-shadow-size :

$heading-shadow-size: 0.55rem;

Mais plutôt que de simplement remplacer les tailles d’ombrés dans la mixin, mettons en application un argument $shadow-size et définissons $heading-shadow-size en tant que réglage par défaut :

$heading-shadow-size: 0.55rem;
@mixin heading-shadow($colour: $colour-primary, $size: $heading-shadow-size){
  text-shadow: $shadow-size $shadow-size $colour;
}

À présent, votre mixin est aussi solide qu’un roc. Elle est maintenable grâce à ses variables et a un effet prévisible mais customisable, grâce à l’implémentation d’arguments et de valeurs par défaut.

En résumé

  • Les mixins sont très similaires aux variables, mais au lieu de ne stocker que des valeurs, ils stockent des blocs de code entiers.

  • On utilise le mot clé @mixin pour déclarer une mixin.

  • On utilise le mot clé @include pour placer une instance du mixin dans son code.

  • Lorsque Sass compile les instances d’une mixin, il remplace le mixin par les règles qu’il contient.

  • Pour rendre les mixins plus adaptables et réutilisables, vous pouvez inclure des arguments lorsque vous les déclarez.

  • Les arguments peuvent changer l’effet du code compilé, par exemple définir des couleurs ou tailles customisées.

Dans le chapitre suivant, nous allons voir un autre ensemble d’outils Sass servant à gérer les modules de code qui se répètent : les extensions.

Example of certificate of achievement
Example of certificate of achievement