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

Découvrir LESS

Parcourir le projet LESS

Testez gratuitement nos 1341 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Faites le tour du projet LESS lorsqu'il est terminé. Parcourez les coulisses du projet afin de vérifier son fonctionnement dans les détails.

Transcription

Eh bien voilà, ma feuille de style est à présent terminée, mon site est fait, et pour en arriver là, eh bien vous voyez que j’ai dû créer de nouveaux fichiers LESS ici, que j’ai mis dans le dossier less de mon site. Et je les ai, bien évidemment, tous importés dans le fichier principal, dans styles.less. Alors, dans cette vidéo, eh bien je voudrais vous montrer que le bénéfice, finalement, de cette approche, c'est-à-dire d’utiliser un fichier principal dans lequel j’importe les autres, eh bien c’est que chacun des fichiers pris individuellement ici, reste très petit, et donc très facile à manipuler. Regardez par exemple title.less. Voyez qu’il n’y a pas grand-chose ici dedans. J’ai 22 lignes de code, et donc c’est très facile à lire, c’est très facile à maintenir, très facile à comprendre, à mettre à jour, à modifier. Même chose par exemple au niveau de ce fichier variables.less. Eh bien si j’ai envie de modifier des choses dans ma feuille de styles, la plupart du temps, eh bien je pourrais me contenter d’ouvrir ce fichier, d’aller modifier la valeur de ces variables, de recompiler sans aller donc rechercher des choses dans les autres fichiers que j’ai créés. Alors, pour que ça fonctionne bien, eh bien la clé du succès ici, c’est de donner des noms qui ont du sens à tous ces fichiers. C’est grâce à cela, finalement, que vous saurez exactement qui fait quoi, et dans quel fichier vous devez éventuellement aller modifier quelque chose. Alors, mon site est terminé, je vais vous le montrer. Dans chrome, vous avez donc la version finale de ce site, avec les petits effets de roll-over ici. Ce site est réactif, regardez, si je prends la fenêtre du navigateur et que je la diminue de largeur, vous voyez qu’au bout d’un moment, j’arrive à un point d’arrêt, et donc je passe d’une disposition à l’autre. J’ai également, vous voyez, développé un petit JavaScript ici, pour animer ce menu destiné, vous l’avez deviné, aux tablettes et smartphones. Alors, je vais procéder maintenant à la dernière compilation de mon fichier styles.less avant de le mettre en production. Mais pour ça, je ne vais pas utiliser Dreamweaver puisque j’ai envie de minifier mon fichier, et donc Dreamweaver ne le fait pas. Alors pour ça, eh bien je vais retourner au niveau de ma ligne de commande. Alors, dans ma ligne de commande, vous voyez que c’est écrit less, ici. Alors ça, ça signifie que je me trouve dans le dossier less. Regardez d’ailleurs, si je fais une commande ls qui me permet de lister le contenu du dossier dans lequel je me trouve, c’est l’équivalent de la commande dir sur Windows, eh bien regardez, je suis bien à l’intérieur du dossier less de mon application, vous reconnaissez ici tous ces fichiers less que nous avons créés dans ce chapitre. Alors, je vais compiler donc mon fichier styles.less pour la dernière fois. Donc je vais utiliser ma commande lessc pour less compiler, et comme je veux le minifier, eh bien je vais prendre l’option --clean-css comme ceci. Qu’est-ce que je veux compiler ? Je veux compiler styles.less, et le résultat de cette compilation, eh bien je veux l’envoyer dans le dossier css, et dans un fichier qui s’appelle styles.css comme ceci. Je lance ma commande, rien ne se passe dans le terminal. Ça, c’est plutôt bon signe parce que si j’avais eu un feedback dans le terminal, ça voudrait dire que j’aurais une erreur, donc voilà, c’est plutôt bien. Et quand je reviens dans Dreamweaver, eh bien j’ai un message qui me dit : « Attention, le fichier styles.css a subi des modifications en dehors de Dreamweaver, voulez-vous le charger à nouveau ? » Eh bien oui, allons voir à quoi il ressemble maintenant. Eh bien vous voyez qu’il a été compilé et minifié. Voici la version finale de styles.css, la version minifiée que vous allez mettre en production. Et votre projet est à présent terminé.

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 !