Découvrir LESS

Utiliser des paramètres

Testez gratuitement nos 1302 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Votre formateur vous explique comment altérer le fonctionnement d'un mixin en lui envoyant des paramètres.

Transcription

Dans cette vidéo, nous allons démarrer notre exploration approfondie des mixins less. Et pour vous illustrer tout cela, eh bien, j’ai un petit fichier html tout simple. Donc j’ai d’abord un div qui s’appelle wrapper, qui encadre tout le contenu de cette page, et le contenu de cette page, eh bien c’est d’abord une en-tête, donc un élément header avec un titre de niveau 1, ici à l’intérieur. Ensuite, j’ai une section avec un paragraphe de texte. Et puis pour terminer, un footer, donc un pied de page avec une notice de copyright ici à l’intérieur. Au niveau du style css, eh bien vous voyez que cette page html est reliée à un fichier qui s’appelle styles.css qui est donc situé ici dans le dossier style. Et ce fichier est tout simplement le résultat de la compilation ici de styles.less en css, donc tout à fait simplissime. Et au niveau du navigateur, eh bien ça donne ceci. Donc vous avez l’en-tête avec le titre de niveau 1, la section qui se trouve ici avec le paragraphe, et puis le pied de page avec la notice de copyright. Alors, j’aurais envie de mettre à ces trois éléments des coins arrondis. Donc pour ça je vais utiliser la propriété border-radius du CSS 3. Et comme c’est une nouvelle propriété du CSS 3, eh bien, on va également préfixer avec les différents préfixes de navigateur afin d’assurer la compatibilité rétroactive donc avec des versions plus anciennes de certains navigateurs. Donc pour ne pas devoir retaper tout cela pour chaque élément, eh bien je vais créer une mixin donc ici. Je vais mettre un petit commentaire, pour me rappeler que c'est ici que je mets mes mixins, et je vais appeler ma mixin, eh bien borderRadius par exemple comme ceci, avec les parenthèses. Et donc au niveau de ma mixin, eh bien, je vais définir un border-radius, mettons par exemple de 20 pixels. Et puis je vais dupliquer cette ligne de code ici dans Brackets avec Command-D sur Mac, ou Contrôle-D sur Windows. D comme dupliquer, pour pouvoir rajouter mes préfixes : donc o pour Opéra, ms pour Internet Explorer, moz pour Mozilla Firefox, et puis le petit dernier webkit pour le moteur webkit, donc qui équipe Safari et Chrome. Donc voilà ici ma mixin qui est définie, et puis je vais bien sûr appeler cette mixin d’abord dans mon header, donc .borderRadius comme ceci. Et puis je vais l’appeler également, alors je vais copier/coller pour que ça aille plus vite, je vais l’appeler au niveau de ma section, et au niveau de mon pied de page, comme ceci. Alors je sauvegarde. Et donc on va compiler une nouvelle version de style.css. On va aller voir si ça s’est bien passé donc. Regardez dans le header, bah ça a marché. J’ai un border-radius ici de 20 pixels qui est défini. Même chose au niveau de ma section. Même chose au niveau de mon pied de page. Et dans mon navigateur, eh bien voilà ce que ça donne. J’ai donc mes trois éléments avec des coins arrondis, des border-radius de 20 pixels. Alors maintenant, ce que j’aimerais faire, c’est modifier le comportement de cette mixin à chaque fois que je l’appelle. Et là, eh bien les développeurs parmi vous auront probablement reconnu ces parenthèses. Effectivement, dans les langages de programmation comme javascript ou php par exemple, eh bien ces parenthèses sont la marque d’une fonction, et en général dans ces parenthèses, eh bien, on peut passer des paramètres à cette fonction. Eh bien, c’est le cas également dans less. Regardez, dans ces parenthèses, je vais définir une variable less que je vais appeler par exemple radius comme ceci. Et plutôt que de mettre un border-radius à 20 pixels comme ça dans ma mixin, eh bien je vais utiliser ce paramètre radius qui se trouve ici à la place donc de mes 20 pixels, comme ceci. Et puis c’est au moment où j’appelle ma mixin, donc ici plus bas dans mon code que je vais devoir passer une valeur à ce paramètre. Donc par exemple ici pour mon header, eh bien j’ai envie que le radius soit égal à 20 pixels. Par contre au niveau de ma section, eh bien j’aurais envie que le radius soit égal, mettons à 10 pixels. Et puis pour mon footer, eh bien soyons fou, on va mettre mettons 40 pixels. Quand je sauvegarde ici mon fichier less, il sera recompilé et au niveau de ma feuille de style eh bien regardez, à chaque fois que j’ai appelé ma mixin j’ai modifié un petit peu son comportement. Donc ici j’ai un border-radius de 20 pixels. Pour ma section, vous voyez que j’ai 10 pixels. Et pour mon pied de page, pour mon élément footer de 40 pixels. Qu’est-ce que ça donne dans le navigateur ? Eh bien voilà, j’ai des coins arrondis partout mais qui n’ont pas, vous le voyez, le même arrondi. Donc j’ai ici des arrondis différents sur chacun de mes éléments. Donc voilà comment je peux modifier par un paramètre le comportement de ma mixin. Alors je peux aller un petit peu plus loin, puisque je peux donner à ce paramètre une valeur par défaut. Je peux dire par exemple que par défaut, eh bien, mon radius sera égal à 20 pixels comme ceci. Et donc à ce moment-là, si je ne passe pas le paramètre, eh bien je ferai référence à la valeur par défaut de 20 pixels. Donc regardez ce que je vais faire ici. Je vais supprimer le paramètre au niveau de mon header, mais je vais le garder au niveau de ma section, et je vais le garder à 10 pixels. Je vais le supprimer également au niveau de mon footer. Alors, je vais sauvegarder cette nouvelle version de mon fichier less, ce qui va compiler donc une nouvelle version de mon fichier css. Et regardez ce qui s’est passé. J’ai donc ici le border-radius par défaut de 20 pixels pour l’en-tête, pour l’élément header. Par contre pour la section, eh bien là, j’ai passé le paramètre, donc j’ai un border-radius personnalisé, si vous voulez, à 10 pixels. Et pour le footer, comme j’ai retiré le paramètre, eh bien j’ai le border-radius par défaut, vous le voyez, de 20 pixels. Ça donne quoi dans le navigateur ? Eh bien, ça donne un border-radius identique pour l’en-tête et pour le pied de page. Par contre j’ai un border-radius ici un petit peu moins arrondi donc pour ma section, avec le paragraphe qui se trouve ici. Donc voilà encore comment je peux modifier si vous voulez le comportement de ma mixin à chaque fois que je l’appelle. Alors, pour aller vraiment au bout des choses à ce niveau-là, eh bien, je peux bien évidemment rendre cette valeur par défaut égale à une autre variable. Donc je peux définir ici une variable que je vais appeler par exemple defaultRadius, que je vais rendre égal à 20 pixels, comme ceci. Et donc plutôt que de mettre 20 pixels ici au niveau de ma mixin, eh bien, je vais remplacer ceci par une référence vers ma variable defaultRadius. Alors pour le moment, au niveau de mon navigateur, eh bien rien n’a changé. Par contre je peux maintenant très facilement eh bien modifier ici la valeur de cette variable, et mettre par exemple 30 pixels à la place. Et donc j’ai modifié, vous allez le voir, mon borderRadius par défaut. Alors ça, ça peut être intéressant puisque rappelez-vous de ce qu’on a fait dans le chapitre précédent. Ces variables se trouvaient dans un fichier séparé, et donc c’est très souvent le cas dans des applications less comme ceci. Et donc vous allez finalement retrouver dans ce fichier variables.less, eh bien, tous les paramètres finalement, de la mise en forme de votre site. Et vous allez retrouver à un seul endroit, la possibilité donc de modifier ces différents paramètres sans devoir vous rendre dans un fichier spécifique, pour les mixins par exemple. Donc voilà pourquoi on va pouvoir, en général passer par ce type de variable. Eh bien, voici donc une première ébauche de la puissance de ces mixins, puisqu’on va pouvoir modifier le comportement de la mixin à chaque fois qu’on l’appelle, grâce à ces paramètres. Et on peut donner à ces paramètres une valeur par défaut. Vous l’avez vu dans cette vidéo.

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 !