Découvrir LESS

Compiler du côté client avec Less.js

Testez gratuitement nos 1271 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Voyez comment télécharger et installer Less.js sur votre site. Puis voyez comment compiler votre code LESS avec Less.js.

Transcription

Dans cette vidéo, nous allons nous concentrer sur la compilation côté client, c'est-à-dire le fait de compiler notre fichier less en fichier css dans le navigateur qui vient visiter notre page. Alors je suis ici dans mon éditeur de code, j’utilise Brackets pour cette formation. Et la première chose que je vais faire évidement c’est fournir au navigateur le fichier less à compiler. Alors si vous regardez dans ce site ici sur le côté, j’ai un dossier qui s’appelle less dans lequel j’ai une série de fichiers avec l'extension .less. Le fichier principal c’est le fichier styles.less que vous avez ici, alors on va aller voir ce qu'il y a dedans, vous voyez qu’il y pas grand-chose. Je vais simplement importer les autres fichiers less. Nous reviendrons bien évidement plus tard dans le cours sur cette manière d’organiser les fichiers less. Sachez simplement pour le moment que c'est bien ce fichier styles.less que je dois compiler. Je vais donc revenir au niveau de ma page index.html et je vais lier ce fichier styles.less à ma page index.html, bah comme je le fais d’une feuille de style classique. Donc je vais utiliser pour ça la balise link, voilà. Alors il y a un petit truc qui va changer, c’est au niveau de l’attribut role donc je vais mettre ici stylesheet/less. Ça, c’est la seule chose qui n’est pas comme d’habitude. Pour le reste, eh bien, c’est tout à fait classique. Donc vous voyez, ne pas oublier l’attribut href pour aller rechercher dans le dossier less le fichier styles.less que voici. Voilà, je sauvegarde ma page index.html. Alors si j’en reste là, eh bien il y a rien qui se passera au niveau de mon navigateur puisque rappelez-vous que le navigateur ne comprend pas le langage less, et c’est pas son boulot de comprendre le langage less, donc c’est tout à fait normal. La preuve, si je reviens au niveau maintenant de mon navigateur, et que je raffraichis ma page, eh bien vous voyez qu’il n’y a rien qui se passe, je n’ai toujours aucun styles qui sont appliqués à cette page. Le contenu est bien là mais il n’est pas mis en forme, puisque je n’ai pas de style css à proprement parler. Pour que mon navigateur puisse compiler ce fichier less en fichier css, il aura besoin d’une petite bibliothèque javascript, que je vais aller chercher sur le site de lesscss qui est donc ici lesscss.org. Alors ici sur le côté, j’ai un lien qui s’appelle Get Less.js. Et oui, ce site malheureusement n’est disponible qu’en anglais mais bon, c’est de l’anglais facile, donc Get Less.js, voilà, et puis j’ai un gros bouton Download Less.js qui est en version 2.7.1 pour le moment donc, je vais télécharger ceci, voilà. Voilà le fichier JavaScript à télécharger. Et je vais l’enregistrer dans le dossier js de mon site. Vous voyez que ça s’appelle less.min.js. Voilà, j’enregistre ce fichier. Je vais revenir au niveau de mon éditeur de code. Voilà le fichier, donc il est bien ici dans mon dossier js, et juste après avoir appelé donc le fichier less, eh bien, je vais utiliser une balise script comme ceci, voilà, pour aller rechercher dans le dossier js le fichier less.min.js, voilà. Donc le navigateur, il a accès au fichier less à compiler, et il a normalement accès à la bibliothèque JavaScript qui va lui permettre de transformer ce fichier less en fichier css. Donc je vais revenir dans mon navigateur, revenir sur ma page ici et rafraichir ma page pour constater que ça ne marche pas comme attendu. Alors qu’est ce qui se passe ? Je vais aller voir au niveau de mes options pour les développeurs, de mes outils de développement ici, dans Google Chrome, et là, je remarque effectivement au niveau de ma console, que j’ai des erreurs, donc XMLHttpRequest cannot load. Vous voyez qu’on a essayé d’aller rechercher le fichier styles.less mais que ça n’a pas marché. Alors, c’est quoi XMLHttpRequest ? Eh bien c’est tout simplement de l’Ajax. Donc ici, on utilise une requête ajax, une requête asynchrone, pour aller rechercher ce fichier styles.less. Seulement, ça ne marche qu'avec http, data, chrome, chrome-extension, https, etc. Or ici j’utilise le protocole file puisque je ne passe pas par un serveur. Je vais directement rechercher mon fichier sur mon disque dur. Et ça, bah ça ne fonctionne pas, non. Pour pouvoir tester cette solution, vous aurez besoin d’installer sur votre machine un serveur. Alors si vous êtes sur Mac, eh bien, vous allez probablement installer MAMP. C’est la solution la plus populaire sur Mac. Donc MAMP, c’est Apache - MySQL - PHP pour Mac. C’est un petit serveur de développement, donc vous pouvez utiliser, d’ailleurs vous l’utilisez déjà peut-être, si vous êtes sur mac. Si vous êtes sur Windows, eh bien, la même chose pour windows, ça s’appelle tout simplement WAMP, Apache - MySQL - PHP pour Windows, le W, c’est pour ça qu’il est là. Donc le serveur WAMP que vous pouvez installer, et donc, qu’est ce que ça donne ? Voici ma page au niveau du serveur. Vous voyez que je n’utilise plus le protocole file:, je suis ici sur localhost. Donc c’est un vrai serveur web avec le protocole http. Et donc, quand je rafraichis cette page, eh bien là, je vois que quelque chose se passe puisque ma page est bel et bien mise en forme. Alors on va voir ce qui s’est passé. Donc je vais retourner dans mes outils de développement, voilà. Là je vais voir au niveau de ma console, vous voyez que j’ai quelque messages ici qui me dit : bah oui, less a fini de faire son travail, du css a été généré, ici vous le voyez en 119 millisecondes. Donc il y a bien un travail qui a été fait par le navigateur pour compiler de less en css. Si je vais voir au niveau du doc, au niveau des éléments, eh bien, je vais remarquer dans le head de ma page ici un élément qui ne se trouvait pas dans mon code, c’est la balise style qui est ici. Cette balise style, eh bien, elle a été tout simplement injectée par less.min.js. Donc c’est ça le résultat finalement de ce process en JavaScript. Donc je vais ouvrir ceci pour voir ce qui y a dedans et puis vous voyez ici, eh bien, toute la feuille de style, c'est-à-dire le résultat de la compilation de votre code less en code css qui se trouve ici dans cette balise style, qui a été injectée par une requête JavaScript donc. Voilà comment ça se passe. Alors, si je retourne maintenant au niveau de mon code ici, je vais faire un petit changement dans mon application less, donc je vais ouvrir mon fichier variables.less. Nous reviendrons bien sûr sur ces variables plus tard dans le cours. Regardez simplement ici, je définis une variable qui est égale à une couleur. Donc ceci c’est un code couleur alors ce qui est très pratique au niveau de Brackets c’est que quand je passe ma souris, vous le voyez sur un code couleur eh bien, je vois la couleur en question c’est un espèce de bleu foncé ici dans ce petit carré. Alors, autre chose de très pratique dans Brackets, je peux faire un clic-droit sur un code couleur, édition rapide, et puis regardez, je peux aller changer cette couleur, donc voilà, je suis d’humeur orange aujourd’hui je vais prendre un orange assez foncé, quelque chose comme ça. Voilà donc pour une autre couleur. Je sauvegarde mon fichier variable.less, je reviens au niveau de mon navigateur et je vais rafraichir ma page. Et voilà donc, j’ai maintenant donc une nouvelle compilation qui a eu lieu et vous voyez que ma page a changé de couleur, puisque j’ai apporté un changement. Alors attention ici, il peut y avoir un petit piège. Parfois ça ne marchera pas, pourquoi ? Parce que j’ai modifié ici mon fichier variables.less. Or le fichier que j’appelle dans ma page html, c’est styles.less, et styles.less, eh bien, il n’a pas été modifié, donc parfois ce qui peut se passer c’est que le cache de votre navigateur va vous jouer des tours puisque c’est le fichier styles.less qui aurait été caché dans le cache du navigateur, et comme aucun changement dans ce fichier n’a été détecté, c’est celui-là qui sera resservi. Alors si cela ne fonctionne pas chez vous, si vous voyez pas ce changement de couleur, eh bien vous pouvez peut-être essayer de tuer, de killer votre cache, comme on dit. Alors pour ça, regardez, j’ai installé une petite extension, ici dans Chrome, qui s’appelle Cache Killer. Vous voyez que si j’appuie ici sur ce petit bouton, OFF devient ON, ça veut dire que Cache Killer est maintenant activé, et donc que je vais forcer mon navigateur à ne pas utiliser le cache, c'est-à-dire aller rechercher à chaque fois les fichiers sur le serveur même s'il ne détecte pas de changement dans ces fichiers. Donc si ça ne marche pas pour vous du premier coup, installez ce petit Cache Killer, activez le, et rafraichissez votre page, et normalement, à ce moment-là, vous devriez voir le changement. Voilà, donc vous voyez comment on peut ici compiler du code less en code css côté client, donc dans le navigateur qui vient visiter votre page.

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 !