Découvrir LESS

Écrire du code LESS

Testez gratuitement nos 1271 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Découvrez ce qu'implique le fait d'écrire du code LESS pour un développeur. Il est notamment indispensable de compiler du code LESS pour le transformer en CSS.

Transcription

Maintenant que vous en savez un petit peu plus sur ce qu’est less, eh bien nous allons nous pencher sur une autre problématique, à savoir celle d’écrire du code less. Alors la première chose que vous devez savoir à ce niveau-là, c’est que le langage less est le langage css. Cela veut dire qu'on va prendre le css officiel, celui que vous connaissez et manipulez déjà plus longtemps et avec less, eh bien nous allons lui ajouter une série de fonctionnalités à ce css. Ça veut dire que du code css valide est également du code less valide. Et ça c’est plutôt une bonne nouvelle pour vous. Ça veut dire que vous écrivez finalement du code less sans le savoir depuis que vous écrivez du css. Ça veut dire également que toutes les connaissances que vous avez en css sont applicables telles quelles quand vous écrirez du code less. Donc tous ce que vous connaissez déjà n’est pas perdu. Vous pourrez le réutiliser quand vous écrirez du code less. Par contre, du code less valide n’est pas forcément, lui, du css valide. Ça ne marche pas dans l’autre sens. En effet, si dans votre feuille de style vous avez utilisé l’une des fonctionnalités supplémentaires qu’est donc introduite dans le css par less, eh bien ça veut dire que le langage que vous avez utilisé n’est plus finalement du css officiel compréhensible directement par les navigateurs. Alors parlons-en justement de ces navigateurs et de leurs relations à less. Un navigateur web, il est sensé comprendre du code css, ça fait partie de son travail que de recevoir ce code css, le comprendre, et puis appliquer les instructions de la feuille de style à la page html pour afficher une page à l’internaute, qui a demandé de voir quelque chose. Par contre, le navigateur, il n’est pas censé comprendre le code less. Ça, ça ne fait pas partie de ses prérogatives. Or, vous maintenant, vous allez écrire vos feuilles de style en less, alors, là on a un problème parce que vous allez écrire vos feuilles de style dans un langage que le navigateur ne comprend pas. Pour résoudre ce problème, vous allez, à un moment donné, devoir transformer votre code less en code css, et cette opération de transformation du code less en code css, eh bien, on appelle ça la compilation. On va devoir donc compiler notre code less en code css. Alors pour réaliser cette opération de compilation qui consiste, je vous le rappelle, à transformer du code less en code css, eh bien, vous avez plusieurs options, plusieurs façons de faire. Une première approche, c’est de faire une compilation côté client. Ça veut dire une compilation qui a lieu dans le navigateur de l’internaute qui vient visiter notre site. À ce moment-là, vous allez envoyer votre code less au navigateur. Oui mais attention, parce que le navigateur n’est pas censé le comprendre ce code less, rappelez-vous, mais donc en plus de ça, vous allez envoyer au navigateur un fichier JavaScript qui va permettre au navigateur de compiler votre code less. Et donc le navigateur va générer, comme ça, du css et puis va utiliser le css qu’il a généré lui-même donc pour afficher la page. Alors ça pose pas mal de problème. D’abord je vous ai dit que nous utilisons pour ça du JavaScript or vous savez que le support JavaScript diffère d’un navigateur à l’autre et donc vous, en tant que développeur less, eh bien vous perdez tout contrôle sur l’environnement dans lequel votre code less sera compilé en css. et parfois, ça peut mener à quelques surprises, ça pose également un gros problème de performance puisque cette opération de compilation est gourmande en temps et en ressource. Et vous demanderez au navigateur de l’internaute de réaliser cette opération en plus de tout ce qu’il a déjà à faire pour afficher votre site. Donc ça posera des problèmes de performance. Heureusement il y a d’autres solutions, notamment la compilation côté serveur. Alors à ce moment là, vous utiliserez votre serveur pour compiler votre code less en code css. Vous utiliserez php, vous utiliserez java, vous utiliserez .NET , ColdFusion, peu importe finalement la technologie serveur que vous avez choisie d’utiliser, c’est le serveur qui se chargera de la compilation. Alors, on élimine le problème de la compatibilité, puisque là, bah il n’y a plus de navigateur qui supporte du JavaScript ou quoi ou qu’est-ce, c’est le serveur qui s’occupe de tout cela avant d’envoyer les données vers le navigateur. Par contre, nous ne résolvons pas notre problème de performance, puisque cette opération, elle est toujours aussi gourmande en temps et en ressource et votre serveur devra réaliser cette compilation en plus de tous ce qu’il doit déjà faire pour faire fonctionner votre application web. Alors nous allons privilégier la troisième méthode. Il s’agit de précompiler du code less sur votre ordinateur. Et là à ce moment-là, c’est vous, le développeur less qui allez vous charger de compiler votre code less en code css sur votre machine à vous, la machine de développement donc, avant d’uploader le site sur un serveur, donc avant de mettre le site en ligne. Mais finalement ce que vous mettrez en ligne, eh bien c’est le code css que vous aurez vous-même compilé. Et donc, au niveau du serveur et du navigateur qui vient visiter votre site, bah il y a rien qui change par rapport à une technique, je dirais classique, puisque ce que vous mettez sur internet c’est directement du css, donc à ce niveau là il y a rien qui change. Simplement vous aurez généré ce css au préalable à partir du code less que vous aurez écrit sur votre ordinateur. C’est évidement cette option-là que nous privilégierons dans cette formation.

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 !