Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

Découvrir LESS

Découvrir LESS

Testez gratuitement nos 1338 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Partez à la découverte de LESS dans ses grandes lignes. Grâce à un premier exemple simple, vous découvrirez quelques principaux avantages de LESS.

Transcription

Alors c’est quoi finalement ce fameux less ? Eh bien, less c’est un préprocesseur css. C’est donc quelque chose qui se passe avant le css. Alors j’ai ici une page html, tout ce qu’il y a de plus simple, de plus banale, et cette page html, eh bien je l’ai liée à une feuille de style css, comme on fait d’habitude, avec la balise link. Cette feuille de style s’appelle styles.css, et se trouve dans le dossier css de mon site. On va aller la regarder cette feuille de style. Donc dans le dossier css de mon site, j’ai ici styles.css et regardez, c’est une feuille de style tout à fait classique. Donc c’est du css bête et méchant, c’est du css tout à fait habituel que vous connaissez déjà. Alors au niveau du navigateur, eh bien voilà ce que ça donne c’est une simple petite page web avec quelques mises en forme de base. Alors, là où less est intervenu, c’est que ce n’est pas moi en fait qui ai écrit cette feuille de style styles.css. Cette feuille de style, elle a été automatiquement générée par less, par la version 2.7.1 de less. Vous voyez, c’est marqué ici dans le commentaire. Moi, ce que j’ai écrit, eh bien ce sont les fichiers « .less » qui se trouvent ici dans le dossier less de mon site. Et j’ai ici un fichier styles.less, et c’est lui en fait qui a été transformé, qui a servi de base à la génération de ce fichier styles.css. Et nous verrons plus tard dans la formation comment on peut transformer un fichier less en fichier css. Au passage, c’est une opération qu’on appelle la compilation d’un fichier less en css. Le prochain chapitre est entièrement consacré, d’ailleurs, à ce sujet. Alors pourquoi j’ai écrit du code less ? Et pourquoi j’ai demandé à less de le compiler en styles.css alors que j’aurais pu directement écrire ma feuille de style css ? Eh bien, retournons sur le navigateur, et regardez ici. Imaginons que j’aie envie de changer mon jeu de couleur, parce que je trouve que mon site ici bah il est un peu trop bleu et puis je n’aime plus le bleu. Vous remarquez que j’ai du bleu ici dans l’entête du site, j’ai un dégradé de bleu. Au niveau du pied de page, j’ai également une couleur de fond en bleu. J’ai également une nuance de bleu ici, au niveau du fond de la page et j’utilise le bleu aussi pour les liens. Vous le voyez ici. Alors j’ai envie de changer tout ça, de changer le bleu, et d’avoir une autre couleur. Vous savez que si vous voulez faire ce genre de choses avec du css classique, eh bien, vous devez aller dans votre feuille de style styles.css et vous devez commencer à lire cette feuille de style de haut en bas. Tiens là, j’ai une background color que je dois changer. Ici, au niveau de la balise header, j’ai une autre background color j’ai des dégradés qui doivent changer. J’ai également ici, un petit peu plus bas, eh bien, des liens dont je dois changer la couleur, un footer dont je dois changer la couleur. Bref, vous devez parcourir toutes vos feuilles de styles et changer la couleur un peu partout. Alors, regardez ce que je vais faire. Je vais aller dans ce fichier qui s’appelle variables.less et ici, je définis une couleur qui est, vous le voyez, du bleu foncé. Eh bien, je vais changer la couleur. Voilà, je vais faire une édition rapide, alors on va prendre, mettons de l’orange. Voilà, quelque chose comme ça, là c’est foncé. Voilà, je vais sauvegarder mon fichier variables.less avec la modification que je viens de faire. Je reviens dans mon navigateur, je rafraichis ma page et toute ma feuille de style a changé, c'est-à-dire que j’ai changé la couleur de fond de mon pied de page, j'ai changé le dégradé de mon entête, j’ai changé le fond de ma page ici, et j’ai également changé tout ça en une seule fois, en une seule opération, la couleur de mes liens. Eh bien, c’est ça finalement la magie de less-css. Donc j’ai été changé un petit paramètre dans un fichier less et puis less a régénéré une nouvelle version de ma feuille de style, de manière automatique. C’est maintenant cette nouvelle feuille de style qui est appliqué automatiquement, donc, à mon site. Alors, j’espère avoir ouvert votre appétit et votre curiosité. Nous allons maintenant passer le reste de la formation à essayer de découvrir comment tout cela fonctionne.

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 !