CATALOGUE Code & Data Formation XHTML/CSS Maîtriser le préprocesseur CSS : LESS

Installation et Utilisation de LESS avec Node.js et NPM

Retour à la formation
Chapitre 1 Leçon 4
Précédent
Suivant

Découvrez comment installer LESS via Node.js et NPM, et compilez vos fichiers LESS en CSS facilement.

Détails de la leçon

Description de la leçon

Dans cette leçon, nous explorons l'installation de LESS en utilisant Node.js et NPM. Vous apprendrez à :

- Installer Node.js sur différentes plateformes (Windows, macOS, Linux).

- Utiliser l'invite de commande pour naviguer vers le répertoire contenant vos fichiers LESS.

- Exécuter la commande lessc pour compiler un fichier LESS en feuille de style CSS.

- Comprendre les avantages et inconvénients de cette méthode de compilation, notamment la difficulté d'implémenter le watch.

- Utiliser l'option source.map pour améliorer le débogage avec les inspecteurs d'éléments des navigateurs.

Grâce à cette vidéo, vous maîtriserez les fondamentaux pour travailler avec LESS et Node.js, en optimisant votre flux de travail de développement front-end.

Objectifs de cette leçon

Les objectifs de cette vidéo sont de montrer comment :

- Installer et configurer Node.js et NPM pour utiliser LESS.

- Compiler des fichiers LESS en CSS.

- Utiliser des options avancées comme source.map pour améliorer le débogage.

Prérequis pour cette leçon

Pour suivre cette vidéo, vous aurez besoin de :

- Connaissances de base en HTML et CSS.

- Une compréhension de base des systèmes de commande (CMD sous Windows, Terminal sous macOS/Linux).

Métiers concernés

Les connaissances acquises dans cette vidéo sont applicables dans plusieurs métiers :

- Développeur Front-End

- Intégrateur Web

- Designer Web

Alternatives et ressources

Des solutions alternatives pour la compilation LESS incluent des outils comme CodeKit ou des tâches automatisées par Gulp et Grunt.

Questions & Réponses

Node.js permet de gérer facilement les paquets via NPM, facilitant l'installation et la mise à jour de LESS.
La commande utilisée est lessc fichier.less fichier.css.
L'option source.map permet un débogage plus précis, en reliant les lignes de code CSS compilé aux lignes correspondantes dans le fichier LESS d'origine.