Découvrir LESS

Organiser ses fichiers LESS et CSS

Testez gratuitement nos 1327 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Terminez la configuration de votre site en créant vos fichiers LESS et CSS. Voyez comment lier ces fichiers à vos pages web.

Transcription

Maintenant que mon site existe dans Dreamweaver, eh bien, je vais pouvoir passer à la configuration de mon application LESS. Donc je vais me rendre ici dans mon dossier less, et je vais créer un nouveau fichier, un fichier que je vais tout simplement appeler styles.less, comme ceci. C’est le fichier principal de mon application LESS, c’est lui que je veux compiler, et c’est lui qui va devenir styles.css, dans le dossier CSS de mon site, donc. Je vais créer maintenant deux fichiers LESS supplémentaires, un fichier que je vais appeler variables.less et un second que je vais appeler mixins.less, comme ceci. Dans mon fichier principal, donc dans styles.less, eh bien je vais m’empresser d’aller importer déjà ces deux premiers fichiers LESS : donc import variables and mixins, et donc je vais utiliser une directive @import ici, pour importer variables.less et pour importer également, eh bien mixins.less, comme ceci. Je sauvegarde, vous voyez que Dreamweaver n’a pas automatiquement généré styles.css puisque j’ai décoché la petite case qui demande à Dreamweaver donc de compiler automatiquement mes fichiers LESS au moment de la sauvegarde. Je vais donc maintenant procéder à la première compilation de ce fichier. De manière manuelle, donc en faisant un clic-droit sur ce fichier, je peux le compiler ici, je peux également utiliser le raccourci clavier F9, pour faire ceci, et donc vous voyez que j’ai un problème, regardez, la ligne 2 ici du code est en rouge, donc j’ai un petit souci, variables.less n’a pas été trouvé, j’ai peut-être fait une petite faute d’orthographe. Effectivement, vous voyez ici que mon Dreamweaver vous montre les problèmes : la ligne 2 est en rouge, je vais également en profiter dans le menu Fenêtre pour afficher mon panneau de Sortie, ce qui va me permettre d’avoir un petit peu plus d’informations, ici, sur les erreurs qu’a rencontrées Dreamweaver, au moment de la compilation. Je vais donc donner le nom correct ici, à ce fichier : variables comme ceci, et on va recommencer. Donc je vais maintenant faire le raccourci clavier, F9, pour donc compiler manuellement mon fichier. Maintenant ça s’est bien passé, vous voyez que dans mon panier de sortie, tout est correct, et le fichier styles.css est bel et bien apparu ici, dans mon dossier css. Alors, dans ce fichier styles.css, bah pour le moment je n’ai rien du tout, puisque mes deux fichiers, mixins et variables, sont complètement vides. Cela dit, ce fichier styles.css, eh bien il existe, donc je vais pouvoir me rendre dans mon fichier html et pouvoir, donc ici, créer une balise link supplémentaire : rel="stylesheet", et puis href=, dans le dossier css/styles.css. Alors, vous remarquez également que ce fichier html est déjà lié à deux autres feuilles de style : reset et font-awesome. Si vous le désirez, vous pouvez également utiliser LESS pour insérer ces deux fichiers de support dans votre page html. Je vais donc retirer ici mes deux balises link, je vais me rendre de nouveau... sauvegarder ma page html, me rendre de nouveau dans styles.less ici, et venir importer mes fichiers de support : import support files. Je vais donc importer un premier fichier qui est reset.css, et puis je vais importer également un second fichier qui s’appelle donc : font-awesome.min.css, comme ceci. Alors, vous êtes peut-être en train de vous dire que je suis en train de faire une bêtise. Effectivement, j’inscris ici dans styles.less que je veux importer deux fichiers css, mais ces fichiers css, eh bien, ils ne sont pas dans le bon dossier puisqu’ils sont ici. Eh bien, regardez, je ne suis pas du tout en train de faire une bêtise, je vais sauvegarder mon fichier styles.less, je vais le recompiler, en appuyant donc sur F9. Vous voyez dans le panneau de sortie que ça s’est bien passé, on va aller voir ce qui se passe au niveau de styles.css, eh bien, vous voyez que comme j’importe des fichiers css, le compilateur LESS a tout simplement, eh bien reporté, copier-coller si vous voulez, ces deux instructions, et donc maintenant, comme c’est le fichier styles.css, finalement qui sera intégré à ma page html, eh bien ce fichier sera parfaitement capable d’aller rechercher ces dossiers puisqu’ils sont maintenant dans le bon dossier. Donc ça, c’est une première façon de faire. Maintenant, je peux carrément cacher leur importation. Donc je vais prendre ici mon fichier reset.css, et cette fois-ci je vais le déplacer dans mon dossier less. Je ne vais pas mettre à jour les éventuels liens, je vais faire la même chose avec font-awesome, ne pas mettre à jour, et je vais tout simplement changer l’extension, je peux faire ça, puisque rappelez-vous que du code css classique, c’est également du code LESS tout à fait valable puisque LESS vient ajouter ses fonctionnalités au css, donc regardez ceci, si je l’appelle reset.less plutôt que reset.css, eh bien tout ce qui est écrit dans ce fichier reste valide bien sûr. Je vais faire la même chose avec font-awesome, je vais l’appeler .less, comme ceci, et je vais aller corriger mon fichier styles.less puisque cette fois-ci, je n’importe plus des fichiers css, mais bel et bien des fichiers less, comme ceci. Je sauvegarde, je vais recompiler donc par F9 de nouveau, la compilation s’est bien passée, et donc vous voyez maintenant dans styles.css, eh bien, que mes deux fichiers ont été importés. D’abord, le fichier reset.css, et puis ici ensuite, le fichier font-awesome.css. J’ai donc déjà pleins de lignes de codes ici, donc j’en ai plus de 2000, vous voyez, dans mon fichier styles.css qui est compilé, et c’est donc maintenant le seul et unique fichier css que j’ai besoin d’appeler au niveau de ma page html. Ce fichier, il sera un petit peu plus gros évidemment, mais il ne sera téléchargé qu’une fois, lorsque l’internaute viendra visiter la première page de votre site, ensuite il sera mis dans le cache du navigateur, et servi depuis le cache du navigateur, et donc vous économisez ici, deux requêtes vers le serveur.

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 !