Comprendre et utiliser Sass #3 – les mixins
Vous souhaitez mettre votre solution en avant en haut de cet article ? Contactez-nous
La semaine dernière, nous avons découvert l'utilisation des boucles en Sass. Il est l'heure de réutiliser ce que l'on a déjà vu avec les Mixins.
Pour ceux qui commençeraient cette série d'articles avec cet article, je vous conseil vraiment la lecture en premier lieu de l'article Comprendre et utiliser Sass #1 – les variables et les conditions, sans quoi la compréhension sera délicate.
Les Mixins
Présentation générale
Les mixins Sass peuvent être rapprochés aux fonctions dans les autres langages de programmation.
Pour schématiser, il est possible de se représenter une fonction comme plusieurs lignes de code auquel nous donnons un nom, pour qu'elle soit plus simple à réutiliser. L'avantage est évident pour un groupe de ligne qui a à être utilisé à de nombreux endroits : le fichier reste plus court et plus lisible, et en cas de besoin de changement, il n'y a pas à changer chaque occurrence.
Notre exemple tiré de fait réels :
TANT QUE la chambre de $enfant n'est pas propre
range ta chambre, $enfant
FIN DU TANT QUE
SI il fait beau
vas jouer dehors, $enfant
SINON
vas jouer aux lego, $enfant
FIN DU SI
FIN DE LA FONCTION
// Appel de la fonction
sois_sage(mathieu)
sois_sage(lucas)
Dans notre exemple (un peu tiré par les cheveux, j'en conviens), nous avons défini une fonction "sois sage", avec ce qu'un enfant doit faire quand on lui demande d'être sage. De cette manière, nous pouvons résumer la boucle permettant de ranger la chambre, puis une condition pour envoyer l'enfant jouer en fonction du temps dehors.
Avez-vous noté le mot entre parenthèses (enfant) après le nom de notre fonction ? C'est un argument. Grâce à ça, il est possible de modifier notre fonction au cas par cas. Les ordres s'appliquent donc à l'enfant déclaré comme argument lors de l'appel de la fonction.
Fonctionnement
En Sass, le rôle des fonctions est rempli par les Mixins, qui permettent comme dans notre exemple, de résumer un bloc de code en une seule ligne.
Leur utilisation est très simple :
@mixin nom-de-la-mixin(argument1, argument2, …); pour créer une mixin
@include nom-de-la-mixin(10px, #FFF, …); pour appeler la mixin
Exemple
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box {
@include border-radius(10px);
}
Grâce à cette mixin, il n'est plus nécessaire de répéter les préfix constructeurs de border radius ! Inclure la mixin revient à écrire les 4 lignes de css, en ayant pris soin de remplacer $radius par 10px. Nous gagnons donc du temps, et évitons des erreurs d'inatentions et de copier-coller-non_modifier.
Ou trouver des mixins toutes faites ?
Faire ses mixins sous même est quelque chose d'important : elles peuvent être déplacés de projet en projet pour gagner du temps, et éviter de réinventer la roue à chaque projet.
De nombreuses library mixins de base existent même déjà dans la nature, comme avec les projets Compass, ou Bourbon par exemple. Ces library contiennent généralement toutes les mixins nécessaires pour se passer des préfix, créer une grille responsive tres basique, et quelques petites fonctionnalités de base.
Pour finir
Nous en avons fini sur cet article, et sur la découverte des fonctionnalités de Sass.
J'espère que cette petite série d'articles vous aura donné envie de pousser un peu plus loin sur Sass (il vous reste à découvrir de grandes choses comme l'héritage, les listes, …), mais aussi sur les conditions, boucles et mixins, bien plus riches que le peu que je vous ai montré.
By
