Découvrir LESS

Compiler dans son éditeur de code

Testez gratuitement nos 1302 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
Automatisez la compilation du code LESS en installant un plug-in pour Brackets. Ce type de plug-in existe aussi pour une multitude d'autres éditeurs.

Transcription

De nombreux éditeurs de code proposent des extensions ou des plug-in qui vous permettent d’ajouter des fonctionnalités supplémentaires à votre éditeur de code. Alors, mon éditeur ici, c'est Brackets, et dans le menu Fichier de Brackets, eh bien, je trouve le Gestionnaire d’extensions. Alors, dans votre éditeur de code, si vous utilisez par exemple Sublime Text ou Notepad++, eh bien, ça s’appelle peut-être autrement. C'est peut-être pas une extension ou un plug-in, ça se trouve peut-être pas dans le menu Fichier mais ailleurs, mais je suis convaincu qu’il existe en tout cas un système d’extension comme ceci. Alors ici, au niveau de Brackets, eh bien, vous voyez que j’ai pleins d’extensions qui sont disponibles et qui me permettent de faire des tas de choses intéressantes. J’ai déjà installé une extension pour vous, ça s’appelle LESS AutoCompile et ça ma permet d’automatiquement compiler mon code LESS quand je sauvegarde un fichier LESS. Au passage, pour que cette extension puisse fonctionner eh bien, elle a besoin de node.js, donc il faut que node.js soit installé au préalable sur votre ordinateur. Alors, je vais activer cette extension et fermer mon gestionnaire d’extension. Alors on va faire l’expérience, donc je vais ouvrir ici mon fichier styles.less et regardez, après quelques instants, eh bien, un fichier styles.css apparait juste ici au-dessus, et regardez, effectivement, mon fichier styles.less a été automatiquement généré par mon extension. Tout ça marche correctement, cela dit, eh bien j’ai peut-être pas envie de compiler mon fichier styles.less au même endroit, j’ai peut-être envie de le compiler ailleurs, par exemple dans le dossier CSS de mon site. Alors, comment faire cela ? Eh bien, je vais retourner dans mon Gestionnaire d’extensions. Je vais me rendre ici, dans mes extensions Installées et je vais cliquer sur Plus d’infos. Voilà, pour me retrouver ici sur le site de mon extension Alors, remarquez ici, dans le README, que l’extension a quelques options, notamment ici une option out qui me permet de spécifier un fichier de sortie, c’est-à-dire le fichier vers lequel je veux compiler. Alors allons-y, on va faire l’expérience, donc je vais revenir dans styles.less. Je vais taper ici dans un commentaire, « out: », j’ai envie d’aller dans mon dossier css et de créer un fichier qui s’appelle styles.css comme ceci. Je vais sauvegarder maintenant styles.less et regardez, au bout de quelques instants, j’ai un fichier styles.css qui vient donc ici se générer dans le dossier css et regardez, c’est effectivement mon fichier less qui été compilé par mon extension. Je peux donc tranquillement venir supprimer ici mon fichier styles.css dans le dossier less, donc je n’en ai plus besoin. Alors c’est pas tout parce que, regardez maintenant, j’ai envie par exemple d'aller modifier mon fichier variables.less. Rappelez-vous que dans mon fichier styles.less eh bien, je viens importer ce fichier variables.less donc. Je vais ouvrir ce fichier variable.less, et au bout quelques instants, eh bien mon extension, vous le voyez fait sont travail et me génère un fichier variables.css. Alors ça, je n’ai pas trop envie que ça se passe comme ça. Moi, quand je modifie variables.less, je veux compiler styles.css et pas variables.less. Donc retournons sur internet et allons voir les autres options de mon extension. Alors regardez ici, j’ai une option qui s’appelle main et qui me permet de compiler un fichier différent à la place de celui que je modifie. Ah bah ça, ça sonne très très bien tiens, donc je vais retourner ici au niveau de mon fichier variables.less et je vais donc dire main = styles.less, ça signifie ceci : quand je sauvegarde le fichier variables.less, en fait, je veux compiler styles.less, donc je sauvegarde ceci, je vais supprimer mon fichier variables.css. Voilà. Je vais apporter une modification à mon fichier, par exemple je vais changer ici la couleur, donc je vais prendre du jaune, c’est du jaune foncé. Voilà. Je sauvegarde variables.less et regardez, je n’ai plus de fichier variables.css qui vient se générer ici puisqu'à la place, eh bien, j’ai compilé styles.less. Donc je vais recopier ici cette ligne de quote, ce petit commentaire. Au passage, il faut que ces commentaires soient la première ligne de votre code less pour que ce soit pris en compte par l’extension. Donc je vais copier ceci et venir dans mes autres fichiers, donc ici, dans mixins.less pour venir coller et sauvegarder, je vais me rendre dans main.less pour faire la même chose. voilà, dans header.less pour également faire la même chose comme ceci, dans footer.less pour venir copier cette ligne de code et même chose dans content.less. Voilà qui est fait. Donc je vais un petit peu nettoyer ceci, donc ce fichier mixins.css, je peux le supprimer et je vais fermer ici tous les fichiers que j’ai ouverts. Donc voilà comment ça va se passer, vous voyez donc que maintenant je peux aller modifier l’un des fichiers qui se trouvent ici dans mon dossier less et ce sera toujours le fichier styles.less qui sera compilé en styles.css ici dans mon dossier css. Alors, dernière petite option que je vais vous montrer, je vais retourner sur le site pour vous montrer tout cela. C’est une option qui s’appelle compress et qui me permet de compresser, donc de minifier mon fichier css, donc regardez, ça se passe comme ceci compress égal true et je vais séparer les différentes options par une virgule. Donc je vais retourner ici au niveau de styles.less, je vais rajouter une option supplémentaire. Je vais mettre compress: true, comme ceci, je sauvegarde et regardez maintenant, mon fichier styles.css a bien été recompilé, mais il a été au passage minifié également. Alors cette option, donc cette extension, c'est celle que je vais utiliser dans ce cours pour compiler automatiquement mon code less en code css, moi je trouve ça très très pratique puisque c’est directement intégré à mon éditeur de code. Je ne dois rien installer de supplémentaire, je ne dois pas aller dans la ligne de commande, et donc vous voyez que dès que je vais modifier un de ces fichiers less, eh bien, styles.css sera automatiquement recompilé à chaque fois que je vais sauvegarder l’un de ces fichiers. Si vous utilisez autre chose que Brackets, eh bien, recherchez dans les extensions ou les plug-in de votre éditeur de code et je suis convaincu que vous trouverez quelque chose de similaire.

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
Votre/vos formateur(s) :
Date de parution :21 déc. 2016
Durée :2h59 (30 vidéos)

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 !