Découvrir LESS

Organiser ses fichiers

Testez gratuitement nos 1271 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Grâce à LESS, vous pourrez organiser vos fichiers de manière beaucoup plus efficace et productive. Étudiez cette approche en détail.

Transcription

Avec tout ce que j’ai ajouté dans mon fichier styles.less dans les vidéos précédentes, eh bien, celui-ci commence à devenir très long. Et puis ça commence également à devenir un peu un fourre-tout de pleins de choses différentes. Vous voyez que je définis ici des variables, et puis un petit peu plus bas je définis des styles pour différentes parties de ma page et de mon site. Bref, si je ne fais pas attention, eh bien, ce fichier styles.less va devenir très très long et donc je vais avoir du mal à voyager dans ce fichier, à m’y retrouver, et à le mettre à jour, à le modifier, à le développer. Alors en général, quand on fait ce genre de choses, eh bien, on préfère travailler avec un grand nombre de petits fichiers qui s’appellent les uns les autres, plutôt que d’avoir moins de fichiers mais qui sont plus gros et donc plus difficile à manipuler et à mettre à jour. C’est ce qu’on va faire dans cette vidéo. Je vais vous montrer comment on peut organiser donc les fichiers de notre application less. Alors, la première chose que je vais faire, c’est au niveau de mon site, je vais modifier le nom de mon dossier styles. Je vais appeler ça less à la place de styles. Et puis la deuxième chose que je vais faire, c’est que je vais demander à mon extension de ne pas compiler mon fichier less à la même place, au même endroit. Donc voyez qu’ici styles.less et styles.css sont au même endroit. Mais je vais plutôt demander à mon extension d’aller compiler, et pour ça je vais lui spécifier un fichier de sortie, mon fichier less à un autre endroit de mon site, donc dans un dossier que je vais appeler css. Et je vais appeler ça styles.css comme ceci. Alors je sauvegarde, et puis au bout d’un petit moment, eh bien, vous voyez que mon extension a compris ce que je voulais faire puisque j’ai un dossier css qui a été créé ici automatiquement, et un fichier styles.css qui se trouve ici, et qui est tout simplement la version compilée de styles.less. Alors j’ai deux choses à faire maintenant dans mon fichier index.html, je vais maintenant faire référence au fichier styles.css qui se trouve dans le dossier css, et dans mon dossier less, eh bien, je peux tout simplement supprimer ce fichier styles.css, qui est fait. Alors, au niveau de styles.less, eh bien, je vais maintenant répartir les différentes choses que j’ai écrites là-dedans dans différents fichiers plus petits. Je vais commencer par les variables. Donc, je vais créer un nouveau fichier dans le dossier less que je vais appeler variables.less, mais vous voyez que quand je fais ça, eh bien, mon extension est toujours active, et donc elle fait son travail. Vous voyez qu’elle génère un fichier variables.css ici dans le dossier less. Et ça, ça ne m’intéresse pas trop. Donc pendant que je réorganise mes fichiers, eh bien, je vais retourner ici dans mon Gestionnaire d’extensions pour désactiver mon extension temporairement. Je vais cliquer sur Désactiver, je vais Fermer ceci. Vous voyez que pour activer la désactivation, si vous voulez, je dois recharger Brackets. Donc je vais cliquer ici sur Désactiver les extensions et recharger. Je vais bien sûr enregistrer au passage les modifications que j’ai faites dans index.html, et vous allez voir que Brackets va se fermer et se rouvrir. Et donc mon extension est maintenant temporairement désactivée. Je vais donc supprimer ici mon fichier variables.css qui a été généré. Et puis dans variables.less, eh bien, je vais prendre ici toutes les variables qui se trouvent dans styles.less et je vais les déplacer dans mon fichier variables.less comme ceci. Et donc dans styles.less, à la place des variables que je viens de déplacer donc dans variables.less, eh bien, je vais importer avec une directive import comme ceci, le fichier variables.less, et j’ai besoin pour ça des guillemets, vous voyez ici que j'avais une petite erreur, qui m’est indiquée par Brackets avec la couleur rouge. Donc j’importe variables.less. Alors ça veut dire aussi que quand je vais modifier variables.less, eh bien, c’est styles.less que je vais devoir recompiler et non pas variables.less. Donc je vais ajouter ici une petite instruction pour mon extension, en lui disant main: Main, ça veut dire principal en anglais, donc le fichier principal de cette application, c’est styles.less, et c’est donc ce fichier-là qu’il faudra recompiler quand je vais modifier ici mes variables. Alors, je vais continuer ma réorganisation. Donc je vais maintenant créer un nouveau fichier que je vais appeler main.less pour les styles principaux. Et je vais mettre là-dedans, eh bien, ici le style du wrapper. Voilà, je vais le déplacer dans main.less, refermer la petite accolade, mettre une petite instruction ici pour mon extension que le fichier principal c’est styles.less. Je sauvegarde. Et donc ici je vais venir dans styles.less, eh bien, importer avec une deuxième directive import, il ne faut pas oublier les guillemets cette fois-ci, le nouveau fichier main.less que j’ai créé juste maintenant donc. Je vais continuer avec le header. Et regardez ici, les différents commentaires que j’ai laissés dans mon code commencent à devenir tout à fait intéressants puisque je peux très facilement ici repérer la fin des styles pour le header. Et je vais donc créer un nouveau fichier que je vais appeler header.less. Et au niveau de mes styles, eh bien, je prends les styles du header, je les déplace dans header.less. Je fais un petit peu le ménage pour pouvoir bien lire ce qui est dans ce fichier. Je spécifie que le fichier principal, c’est styles.less. Petit commentaire sur cette première ligne de code, ceci n’est pas du code less, c’est tout simplement une instruction que je laisse pour mon extension ici dans Brackets. Donc, en fonction de l’extension que vous utilisez, de la méthode que vous utilisez pour compiler votre code less, ce ne sera pas tout à fait les mêmes instructions que vous devrez laisser ici. Ceci est spécifique à mon extension que j’utilise ici. Donc dans styles.less maintenant, je vais continuer l’importation de header.less, comme ceci. Alors, je vais continuer avec un fichier que je vais appeler type.less pour tout ce qui est typographie principale. Donc je vais revenir dans styles, je vais prendre ici mon style pour p, et vous imaginez que dans un vrai site plus compliqué, on aurait là-dedans les styles pour les types de niveau 1, de niveau 2, pour les différents éléments qu’on peut peut trouver dans un document web. Donc je vais déplacer ceci dans type, faire un petit peu de ménage, laisser une instruction pour mon extension, comme quoi le fichier principal, c’est bien styles.less. Là, je sauvegarde. Et donc je viens ici importer maintenant, eh bien, le fichier type.less que je viens de créer. Il m’en reste un à faire pour le nav, pour la zone de navigation. Donc je vais créer ici un fichier que je vais appeler nav.less, comme ceci. Regardez de nouveau dans styles.css comment mes commentaires viennent m’aider ici à facilement sélectionner ce que je dois prendre. Donc je vais déplacer ces styles dans nav.less comme ceci, faire juste un tout petit peu de ménage, laisser une instruction pour mon extension, comme quoi le fichier principal, c’est styles.less. Je sauvegarde, et je viens maintenant dans styles.less importer ce dernier fichier que je viens de créer. Je vais donc importer ici nav.less comme ceci, terminer en supprimant la petite accolade qui reste. Alors je peux bien évidemment commenter tout ce code. Donc ici je vais faire import variables, ici je vais faire import styles. C’est une meilleure pratique hein, que de laisser des commentaires dans votre code. Ça vous aidera quand vous aurez des applications qui deviendront comme ça, de plus en plus compliquées à vous rappeler ce que vous avez fait, et à comprendre votre code. Alors, voilà maintenant, j’ai réorganisé tout cela. Je vais réactiver mon extension, donc Fichier, Gestionnaire d’extension, dans mes extensions installées je vais aller réactiver cette extension. Alors quand je réactive une extension, eh bien, je n’ai pas besoin de redémarrer Brackets. C’est un petit peu bizarre mais c’est comme ça. Et donc maintenant vous voyez que mon fichier styles.css ici a bien été généré. Quand je modifie par exemple une variable, mettons ici par exemple title color, je vais mettre FF0 comme ceci. Je sauvegarde. Vous voyez que je n’ai pas de fichier variables.css qui a été généré. Par contre, si je vais dans styles.css et que je vais regarder au niveau de mon titre, eh bien, regardez j’ai bel eh bien, la nouvelle valeur qui est venue se mettre ici. Donc mon application less est maintenant en place. J’ai donc réussi à réorganiser mes fichiers, et à séparer mon code less en différents petits fichiers qui sont donc beaucoup plus faciles à manipuler et à mettre à jour, que moins de gros fichiers. C’est comme ça que l’on désire travailler, c’est une meilleure pratique que d’organiser ses fichiers de cette façon-là.

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 !