Simplifiez-vous le CSS avec Sass

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.

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 ?

.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;

}

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.

$light-purple: #a5b4fc;

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 ! 💪

Reprenons notre CSS, avec notre variable déclarée :

// Ma variable

$light-purple: #a5b4fc;

 

.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;

}

Pour implémenter une variable dans Sass, tapez le nom de la variable à l’endroit où vous auriez normalement inséré la valeur correspondante : ici notre couleur.

// 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;

}

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

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

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

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 :

@mixin nom-de-votre-mixin {

  propriété-css: valeur;

}

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

@mixin title-shadow

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 :

@mixin title-shadow {

  text-shadow: .55rem .55rem #0f0f1c;

}

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 :

.intro__title {

 @include title-shadow;

}

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 :

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.

Ç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.

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 🤩 :

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

$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 :

@mixin title-shadow($color){
    text-shadow: .55rem .55rem $color;
}

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

.intro__title {
    @include text-shadow(#fff);
}

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

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.

À vous de jouer !

Testez vos connaissances sur les variables et les mixins dans ce CodePen. Comparez vos réponses avec la correction sur ce CodePen.

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 la mixin par les règles qu’elle 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’elles s’adaptent encore plus, grâce aux fonctions ? C’est ce que nous allons découvrir dans le prochain chapitre.