Découvrir LESS

Utiliser des mixins

Testez gratuitement nos 1250 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
La véritable puissance de LESS vient probablement des mixins. Voyez comment écrire un mixin simple puis comment l'utiliser dans votre code LESS.

Transcription

Pour conclure ce chapitre consacré aux principes fondamentaux du langage less, eh bien, je vous propose de découvrir une dernière fonctionnalité que l'on appelle les mixins. Alors pour vous illustrer ce qu'est une mixin, eh bien, j'ai ici un fichier HTML qui est presque le même que celui que nous avons utilisé dans les vidéos précédentes de ce chapitre, j'ai simplement ajouté ici un élément supplémentaire, un élément footer, donc un pied de page avec une notice de copyright ici dans le pied de page. J'ai également créé un fichier footer.less pour donner à ce footer donc des propriétés de mise en forme, et puis dans mon fichier styles.less, j'ai évidemment été importé, ce nouveau fichier footer.less, vous le voyez ici. Dans mon navigateur, voilà ce que ça donne, donc c'est simplement un élément supplémentaire, un pied de page avec une notice de copyright ici, au milieu. Je vais revenir maintenant dans mon fichier header.less. Au niveau du dégradé que nous avons créé ensemble dans une vidéo précédente de ce chapitre. Vous n'êtes pas sans savoir que les dégradés sont maintenant bien supportés par les versions modernes de nos navigateurs web, mais il n'y a pas si longtemps, dans des versions un petit peu plus anciennes, eh bien, il fallait dupliquer cette ligne de code, et pour la dupliquer ici dans Brackets, j'ai un raccourci clavier très intéressant qui est le COMMANDE-D si vous êtes sur Mac ou CONTRÔLE-D si vous êtes sur Windows, D comme dupliquer, je duplique cette ligne de code et donc je devais pour rajouter un support pour les dégradés dans des versions plus anciennes des différents navigateurs, ajouter les préfixes, donc -O ici pour Opéra, -ms pour Microsoft, pour Internet Explorer, -moz pour Mozilla, c'est-à-dire pour Firefox, et -webkit, ça c'est pour Safari et pour Chrome qui utilisent tous les deux donc le moteur de rendu webkit. Voilà, donc ici j'ai ajouté dans ma feuille de style, un support pour les dégradés dans des navigateurs plus anciens, donc qui ne supportent pas de manière native les nouveaux dégradés donc du css3. Au niveau de mon navigateur, eh bien, ça n'a strictement rien changé puisque j'ai ici une version moderne de Google Chrome qui comprend les dégradés de manière native mais si j'avais une versions plus ancienne eh bien, je pourrais maintenant profiter de mon beau dégradé. Alors mon beau dégradé, eh bien, il est tellement joli que j'ai envie également de l'utiliser pour mon élément footer, pour mon pied de page. Alors vous avez vu que c'est assez fastidieux finalement de créer un dégradé, de dupliquer cette ligne de code, avec chaque fois les différents préfixes pour les différents navigateurs. Alors, est-ce que ça veut dire que je vais devoir répéter toute cette procédure dans le fichier footer.less ? Eh bien, si je vous pose la question, vous devez bien vous doutez que la réponse est non puisque le langage less me permet de créer des mixins, c'est-à-dire la possibilité de pouvoir réutiliser un petit bout de code css plusieurs fois dans mon application less. Je vais donc créer ici dans mon dossier less un nouveau fichier que je vais appeler mixins.less comme ceci, je vais aller dire à ce fichier que je n'ai pas envie de le compiler directement puisque le fichier principal c'est styles.less, et puis dans styles.less, eh bien, je vais bien évidemment importer ce nouveau fichier mixins.less comme ceci. Je vais maintenant dans mon fichier mixins.less, eh bien, définir une classe css que je vais appeler gradient, gradient ça veut dire dégradé en anglais, et puis, je vais aller copier-coller ou même mieux, couper-coller, donc déplacer ces lignes de code depuis mon fichier header.less vers mon fichier mixins.less qui est ici, et donc, j'ai maintenant défini une classe css dans mon fichier mixins.less. Au passage, je vais supprimer ici ce fichier mixins.css dont je n'ai pas besoin. Alors maintenant, je vais me rendre dans mon fichier header.less et regardez, je vais tout simplement aller rappeler ma classe css gradient qui se trouve défini dans mon fichier mixins.less. Eh bien, voilà ce qu'est un mixin, c'est tout simplement une classe css et je peux rappeler cette classe css à l'intérieur d'autres styles, comme je viens de le faire ici. Alors, si je l'ai fait au niveau du header, eh bien, je peux également le faire au niveau de mon footer. Donc je vais remplacer ici ma background-color par ma classe gradient qui est donc définie dans mon fichier mixins.less. Alors, je vais sauvegarder ici tous mes fichiers et au niveau de ma feuille de style qui a été donc compilée, vous voyez que dans mon header, eh bien, j'ai mon dégradé, au niveau de mon footer, j'ai mon dégradé également, et puis ici, tout au début du code, eh bien, j'ai ma classe css gradient qui est donc définie dans mon fichier mixins.less, c'est ce qu'on appelle une mixin. Et puis au niveau de mon navigateur, eh bien, je profite doublement de mon beau dégradé qui s'applique maintenant à mon en-tête et à mon pied de page. J'ai donc pu réutiliser grâce à ce système un petit bout de code css plutôt que de le répéter ou plutôt que de le copier-coller. Alors dernière petite chose ici au niveau de ces mixins, je vais retourner dans mon fichier mixins.less et je vais tout simplement ajouter ici une paire de parenthèses qui s'ouvre et qui se ferme, re-sauvegarder ce fichier, et regardez ce qui se passe au niveau du code css compilé, donc j'ai toujours mon dégradé au niveau du footer, j'ai toujours mon dégradé au niveau du header, mais par contre, dans le fichier compilé, je n'ai plus ma classe css gradient, ma mixin. Grâce à cette paire de parenthèses, eh bien, le compilateur, donc mon extension qui a compilé mon fichier less, n'a pas générée cette classe ici dans le fichier compilé, c'est devenu quelque chose d'interne à mon système less donc. Voilà pour la base de ce qui est une mixin, c'est tout simplement une façon de réutiliser plusieurs fois du code css. Alors, vous allez voir que ces mixins sont extrêmement puissantes et flexibles, tellement puissantes et flexibles qu'on va y consacrer l'entièreté du chapitre suivant de notre cours.

Découvrir LESS

Étendez le langage CSS avec LESS. Exploitez les fonctions d'automatisation, comme les variables, les fonctions, et la possibilité d'écrire du code de manière imbriquée.

2h59 (30 vidéos)
Aucun commentaire n´est disponible actuellement
 
Spécial abonnés
Date de parution :21 déc. 2016

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 !