wikinotes

Cette page est en lecture seule. Vous pouvez afficher le texte source, mais ne pourrez pas le modifier. Contactez votre administrateur si vous pensez qu'il s'agit d'une erreur.
{{tag>cours dev développement web css sass html}}



====== Utilisez les variables et mixins ======

Notes et transcriptions du cours [[https://openclassrooms.com/fr/courses/8069761-simplifiez-vous-le-css-avec-sass-1#table-of-content|Simplifiez vous le CSS avec Sass]] proposé sur la plateforme [[https://openclassrooms.com/|Openclassrooms]].


===== Initiez-vous aux variables =====

Pour le moment, le site de Robbie Lens ne comporte pas beaucoup de couleurs, mais nous les utilisons sans arrêt. Entre nous, je suis incapable de retenir les couleurs par leur **code couleur hexadécimal**, ni de savoir quelle couleur correspond à quel code. Alors oui, de nos jours, certains éditeurs ajoutent un aperçu de la couleur, ou alors je pourrais copier-coller le code sur Google. Oui. Mais c’est une sacrée perte de temps et cela peut devenir **dangereux**.

Pour la perte de temps je comprends, mais pourquoi dangereux ?

Imaginez : notre cher Robbie Lens n’en peut plus du violet et veut que son site soit orange. Vous allez devoir repasser en revue **tous** vos fichiers CSS, modifier **TOUTES** les valeurs à la main, une par une.

Reprenons l’introduction de notre site, que remarquez-vous ?

<code css>
.navbar__link--purple {
  color: #a5b4fc;
}

.intro__title {
  margin-bottom: 15px;
  font-size: 3.5em;
  color: #a5b4fc;
  font-family: 'Montserrat', sans-serif;
}

.intro__content--purple {
  color: #a5b4fc;
  font-style: normal;
}
</code>

Une magnifique répétition, CAPITAINE !  ''color: #a5b4fc;'' est répétée 3 fois. Minimum.

Comment faire pour rendre ce code plus **lisible** et **organisé** ? Mmmh... si on pouvait définir une couleur **une seule fois** et la **référencer** à chaque fois qu’on en aurait besoin, ce serait vraiment pratique. Eh bien, heureusement pour nous, il existe bien une solution pour le faire, et c’est une **variable**! 🙌

Les variables sont comme des **boîtes**. On les remplit avec quelque chose, dans notre cas des valeurs de couleurs (ou du chocolat) et on y colle une **étiquette** pour savoir ce qu’il y a dedans (chocolat de Kassandre, ne surtout pas toucher !). Si vous avez besoin d’utiliser votre couleur (ou de manger votre chocolat), il vous suffit d’ouvrir la bonne boîte, de l'utiliser et le tour est joué ! (De plus, le reste du bureau ne pourra pas faire semblant, votre nom est sur cette boîte. Tout le monde sait que cette boîte de chocolats est la vôtre).

===== Créez une variable de couleur =====

En programmation, l'équivalent pour coller une étiquette sur ma boîte de chocolats s’appelle **déclarer une variable**. Pour déclarer une variable dans Sass, il vous suffit de taper un **symbole dollar ($)** suivi de son nom, puis deux points, et enfin la valeur que vous souhaitez lui donner.

<code sass>
$light-purple: #a5b4fc;
</code>

Nous avons déclaré (ou créé) notre variable violette, et l’avons nommée ''$light-purple''. OK, il est temps de manger ce chocolat, euh... d’utiliser cette **variable**! 💪

<code sass>
// Ma variable
$light-purple: #a5b4fc;

.navbar__link--purple {
  color: $light-purple;
}

.intro__title {
  margin-bottom: 15px;
  font-size: 3.5em;
  color: $light-purple;
  font-family: 'Montserrat', sans-serif;
}

.intro__content--purple {
  color:$light-purple;
  font-style: normal;
}
</code>

Maintenant, quand vous regardez le CSS compilé, vous voyez bien que Sass a remplacé le nom de la variable par la valeur correspondante :

{{comparaison_css_sass.png}}

<note>
Ne soyez pas trop spécifique lorsque vous nommez vos variables. ''$light-purple'' fonctionne très bien pour un violet clair c’est sûr, seulement il est préférable d’opter pour quelque chose comme **''$color-primary''** ou **''$main-color''** (couleur principale, en anglais).
</note>

Le nom de la variable vous indique que son rôle est de stocker la couleur principale de votre site, qu’il s’agisse de violet, de rose ou… d’orange ! Là où ça devient intéressant, c’est que lorsque vous vous replongerez dans votre code d’ici quelques mois ou quelques années, le nom ''$color-primary'' vous dira toujours quelque chose. Une variable appelée $purple-light qui contient de l'orange vous donnera certainement une sacrée migraine...

Parfait ! Du coup je peux aussi stocker mes borders, paddings et margins ? 🤯

Oui… mais non. Je m’explique : oui vous pouvez, mais pas avec des variables. Dans ce cas, on utilise… les mixins !


===== Créez des ombres avec une mixin =====

<note>
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, donc au féminin (entre nous, en anglais on ne donne pas de genre, donc bon, on va pas chipoter 😉).
</note>

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 propriétés CSS que vous utilisez fréquemment, comme avec une variable :

<code sass>
@mixin nom-de-votre-mixin {
  propriété-css: valeur;
}
</code>

Pour déclarer une mixin, déclarez ''@mixin'' suivi du nom de votre mixin.

<note>
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.
</note>

<code sass>
@mixin title-shadow
</code>

Pour la suite, 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 ''title-shadow'', il s’agit de la propriété ''text-shadow'' et de ses paramètres :

<code sass> 
@mixin title-shadow {
  text-shadow: .55rem .55rem #0f0f1c;
}
</code>

Et voilà votre première mixin Sass ! 👏 Cependant, toute seule, elle ne fera pas grand-chose tant que vous ne l’aurez pas incluse dans le bloc CSS où vous voulez qu’il y ait une ombre.

Pour utiliser notre mixin, et ajouter une ombre dans notre sélecteur ''%%intro__title%%'', tapez ''@include'' suivi d’un espace et du nom de notre mixin :

<code sass>
.intro__title {
   @include title-shadow;
}
</code>

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

{{comparaison_css_sass_02.png}}

Compilation des règles de la mixin de SCSS à CSS

Si vous avez besoin d’ajouter des ombres à d’autres titres, textes ou autre, vous n’aurez qu’à inclure votre mixin dans vos sélecteurs avec @include  et le tour est joué : adieu répétitions !


===== Combinez les variables et les mixins =====

Que se passe-t-il si Robbie Lens nous demande un text-shadow d’une couleur différente pour un titre sur une autre page, de l'orange par exemple ?

La couleur n’est pas la même que dans votre mixin title-shadow ; vous ne pouvez donc pas l’utiliser.

On pourrait créer une nouvelle mixin avec une couleur différente ?

Ça ne vaut pas le coup de créer une mixin juste pour une seule instance/utilisation. Rappelez-vous : on veut un code plus lisible, moins compliqué et sans répétition. Par contre, vous pouvez **modifier** votre mixin pour qu’elle se comporte différemment selon des paramètres.

Minute papillon… des paramètres ? 🤔

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

<code sass>
@mixin title-shadow($color){
    text-shadow: .55rem .55rem #0f0f1c;
}
</code>

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

<code sass>
@mixin title-shadow($color){

    text-shadow: .55rem .55rem $color;

}
</code>

Sass remplacera la variable ''$color'' avec la valeur de couleur que vous choisirez pour créer l’ombre.

<code sass>
.intro__title {
    @include text-shadow(#fff);
}
</code>


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

{{comparaison_css_sass_03.png}}


Compilation des variables et des mixins.

Et les variables, ce n’est pas que pour les couleurs ! Il y a huit types de données en tout dans Sass :

  * les **couleurs** : on vient d’en parler ;
  * les **chaînes de caractères** (strings) : terme de programmation signifiant du texte ;
  * les **nombres** : oui, des nombres ;
  * les **listes** : des collections de n’importe quels éléments ci-dessus ;
  * les **maps** ;
  * et trois autres que vous pouvez laisser de côté pour le moment : les **booléens** (boolean), les **nulls** et les **fonctions**.

<note>
Dans ce cours, nous aborderons seulement les 3 premiers éléments de cette liste, mais pour votre culture générale, sachez juste que les trois autres existent. Je vous recommande de vous renseigner là-dessus en lisant la [[http://sass-lang.com/documentation/file.SASS_REFERENCE.html#data_types|documentation Sass]].
</note>


===== En résumé =====

  * Les variables stockent des valeurs que vous pouvez réutiliser dans tout votre codebase ;
  * Pour définir une variable, tapez le signe dollar ''$'' puis le nom de la variable :   ''$nom-de-votre-variable'' ;
  * Quand vous modifiez la valeur de la variable, cela modifiera cette valeur partout où la variable a été utilisée ;
  * Les mixins sont très similaires aux variables, mais au lieu de ne stocker que des valeurs, elles stockent des blocs de code entiers ;
  *  On utilise le mot clé ''@mixin'' pour déclarer une mixin ;
  * On utilise le mot clé ''@include'' pour utiliser une 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.           

Et si je vous dis qu’il est possible de customiser vos mixins pour qu’ils s’adaptent encore plus, grâce aux fonctions ? C’est ce que nous allons découvrir dans le prochain chapitre.


[[210_optimiser_la_lecture_du_code|◁ Précédent]] |
[[000_start|⌂ Retour au sommaire]] |
[[230_ameliorer_mixins_via_fonctions|Suivant ▷]]
wikinotes

Outils pour utilisateurs

Outils du site

Outils de la page
