L'essentiel de Sass

Créer des mixins simples

Testez gratuitement nos 1271 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Dans cette vidéo, vous découvrirez le système des mixins. Vous allez également créer une première mixin simple qui adresse un cas pratique très courant.

Transcription

Dans cette vidéo, vous allez découvrir l'une des fonctionnalités les plus puissantes de sass. On appelle cela des mixins et vous allez voir qu'il s'agit d'une technique de réutilisation du code particulièrement flexible et efficace. Alors pour vous illustrer tout cela, je vais revenir sur cette propriété border-radius. Vous n'êtes pas sans savoir que cette propriété est l'une des nouvelles propriétés introduites css3. Et donc pour les anciens navigateurs, on doit répéter cette propriété avec le préfixe de navigateur. Vous connaissez probablement cette problématique-là. Alors pour simplifier tout cela au niveau de notre application sass, j'ai créé un nouveau fichier qui s'appelle ici mixins.scss qui est vide pour le moment. Et bien évidemment, dans le fichier principal styles.scss vous voyez ici en ligne que j'importe ce nouveau fichier mixins dans mon application. Donc au niveau de ce fichier mixins.scss, je vais créer une première mixin, pour cela je vais utiliser la directive mixin, comme ceci. Je vais donner un nom à ma mixin, je vais l'appeler borderRadius. Alors remarquez que j'ai un R majuscule et que je n'utilise pas de tiret. C'est tout simplement pour différencier le nom de ma mixin du nom de la propriété border Radius officielle du css. Donc c'est pour ça que je n'utilise pas ici border-Radius mais un autre nom. J'ai besoin également d'une paire de parenthèses et d'une paire d'accolades pour marquer un bloc de code. Alors dans ce bloc de code, je vais marquer borderRadius = 5 pixels, comme ceci. Et puis surtout, je vais répéter cette petite ligne de code alors dans bracket j'ai un petit raccourci qui est le Comand D sur MAC, D comme Dupliquer, ou Control D sur Windows, voilà, donc je vais pouvoir exprimer ceci pour webkit, c'est-à-dire pour Safari et Chrome, pour moz, c'est-à-dire pour Firefox, pour O, c'est-à-dire pour Opéra, et pour ms, c'est-à-dire pour Microsoft donc Internet Explorer. Voilà ma mixin. Je vais sauvegarder ce fichier et donc dans mon fichier buttons.scss plutôt que d'écrire ceci directement, je vais maintenant pouvoir utiliser ma mixin avec la directive include, comme ceci. Et je vais inclure ma mixin borderRadius voilà, avec ces deux parenthèses. Quand je sauvegarde ceci, regardez ce qui se passe au niveau de la feuille de style compilée, vous voyez que ma mixin a été appelée et que j'ai donc tous mes préfixes de navigateur qui sont ici appliqués à cette propriété borderRadius. Alors c'est très simple à utiliser, vous voyez que chaque fois que je voudrais faire des borderRadius, je n'ai plus qu'à écrire ceci. Je ne dois pas à chaque fois répéter les différents préfixes de navigateur et puis surtout, le jour où je pourrais supprimer ces préfixes, et ce jour est déjà venu, je peux supprimer déjà certains préfixes, par exemple ici, je vais supprimer les préfixes pour Opéra et Microsoft, voilà. Je sauvegarde ma mixin, je reviens ici au niveau de mes boutons, je vais recompiler ce code, donc petite modification... je sauvegarde. Et regardez maintenant, je n'ai plus que mes deux préfixes de navigateur que j'ai laissé dans ma mixin, et donc à chaque fois que j'utilise cette mixin dans mon code, maintenant les préfixes correspondant ont été supprimés et seuls ceux que je veux garder sont gardés, je n'ai pas besoin de parcourir toute ma feuille de style et de faire ça manuellement. Grâce à la mixin, c'est très très simple. Alors cela ne s'arrête pas là. Si vous faites de la programmation, je vais revenir dans mixin.scss vous savez que ces deux parenthèses ici cachent une très très grande puissance. En effet, je vais pouvoir grâce à ces parenthèses envoyer des données dans ma mixin donc modifier un petit peu son comportement à chaque fois que je l'utilise. Dans ces parenthèses, je vais définir une variable que je vais appeler par exemple Radius, et donc plutôt que de mettre un borderRadius à 5 pixels ici, manuellement, je vais faire référence plutôt à cette variable Radius que je définie dans les parenthèses. Je sauvegarde ma mixin, je reviens dans buttons.scss alors regardez pour le moment j'ai une erreur, il me dit qu'un paramètre requis manque quand j'appelle ma mixin. Effectivement, quand j'appelle ma mixin ici en ligne 20, je dois maintenant spécifier le degré d'arrondissement dont j'ai besoin. Donc si je mets ici 5 pixels, regardez ce qui se passe : je n'ai plus d'erreur et un borderRadius de 5 pixels qui est généré dans ma feuille de style compilée. Par contre, si je veux un autre degré d'arrondissement, par exemple 10 pixels, regardez ce qui se passe, ma mixin se comporte un petit peu différemment et me génère maintenant un Radius de 10 pixels. Donc vous voyez que je peux, à chaque fois que j'appelle ma mixin, spécifier un Radius différent et donc un petit peu modifier le comportement de cette mixin. C'est hyper flexible évidemment. Alors cela va plus loin que ça. Puisque regardez, si je retire ici mon paramètre, et bien forcément j'ai maintenant une erreur, mais au niveau de ma mixin, je vais pouvoir spécifier pour ceci une valeur par défaut. Donc je vais dire ici Radius : 5 pixels. Et ça, cela signifie que cette variable Radius vaut 5 pixels par défaut, sauf si au moment d'appeler ma mixin, j'ai besoin d'autre chose. Donc ici, si je retourne dans buttons.scss voilà, vous voyez que je ne mets plus rien dans mes parenthèses ici, pourtant je n'ai pas de message d'erreur parce que regardez quand je recompile mon fichier, je ne spécifie rien. Donc par défaut, cela va être 5 pixels, par contre, si je veux une autre valeur, huit pixels par exemple, je peux toujours la mettre dans les parenthèses, et regardez à ce moment-là, ma mixin génère des arrondis mais de 8 pixels cette fois-ci. Donc vous voyez que c'est hyper flexible. Alors si vous le voulez bien, allons encore un petit peu plus loin dans cette flexibilité, je vais retourner ici dans mon fichier variables.scss qui s'affiche vous le voyez, dans la partie droite de mon écran. Je vais définir ici, voilà, par exemple un default border -radius et donc je vais créer voilà, une nouvelle variable sass que je vais appeler defaultRadius, par exemple. Et je vais la rendre égale, par exemple, à 5 pixels. Et donc maintenant que j'ai cette variable qui est disponible, je vais en profiter pour faire un petit Control C ou comand C sur MAC pour la copier. Recharger la feuille de style compilée ici dans mon fichier mixin.scss plutôt que de dire ici que la valeur par défaut est 5 pixels et bien la valeur par défaut sera defaultRadius c'est-à-dire la valeur de la variable que j'ai créée ici dans mon fichier variables.scss. Alors cela me permet tout simplement de mettre dans un seul fichier, variables.scss tous les paramètres de mon application et donc finalement, quand je veux personnaliser mon application sass je n'ai plus besoin de retourner dans les autres partiels, je n'ai qu'à me rendre ici dans le fichier variable.scss c'est là que j'ai tous les paramètres de base de mon application. Comme maintenant, vous voyez ce qui se passe, au niveau de buttons.scss, donc j'appelle ma mixin, si je ne mets de paramètre ici dans les parenthèses, ce sera 5 pixels, tel que défini dans le fichier variables.scss. Voici donc un très bref aperçu de ce que les mixins peuvent faire pour vous. C'est vraiment quelque chose de très puissant, et vous le voyez, d'extrêmement flexible, et dans notre cours, c'est la deuxième technique de réutilisation du code que nous propose sass.

L'essentiel de Sass

Abordez et intégrez Sass dans votre flux de travail. Découvrez les options pour compiler votre code Sass en CSS, passez en revue les mécanismes pour le réutiliser, etc.

2h59 (31 vidéos)
Aucun commentaire n´est disponible actuellement
 
Logiciel :
Sass Sass 3.4.22
Spécial abonnés
Date de parution :25 avr. 2017

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !