Premiers pas avec Less.js

Le développement d'applications Web nous emprunte de nombreux chemins, mais tous ces chemins ont une chose en commun : le code HTML et code CSS, ce qui nous donne de nombreuses possibilités pour que nos applications ressemblent à nos envies ou à nos imaginaires.
Ce qui se passe maintenant, c'est que comme chaque personne a sa façon de se développer, les codes résultants sont souvent très étendus ou quelque peu désordonnés, ce qui affecte un peu la maintenance et les performances. C'est là qu'interviennent les bibliothèques et les préprocesseurs qui nous aident à écrire un code légèrement plus propre et plus efficace, facilitant ainsi le travail d'équipe, car beaucoup de ces bibliothèques nous permettent d'écrire un meilleur code.
Moins.jsLe nom Moins.js provient de la combinaison des mots CSS plus léger, quelque chose comme CSS plus fin ou réduit, ce qui nous donne déjà une idée de ce que va faire ce préprocesseur, qui n'est autre que de nous aider à écrire moins de code CSS, améliorant ainsi la lisibilité et les performances de nos applications et pages web. C'est basé sur JavaScript on peut donc l'utiliser soit côté client, bien que cette pratique soit déconseillée en production, soit aussi côté serveur grâce à npm et Node.js, il peut donc devenir le plugin de certains Cadre JavaScript que nous conduisons en ce moment.
L'idée principale à adopter Moins.js dans notre environnement de développement, est d'aider à respecter le principe SEC, ce qui signifie ne pas nous répéter, et pour y parvenir Moins.js intègre des fonctions, des classes et des variables qui nous permettent d'écrire du code beaucoup plus réutilisable que ce que nous écririons dans CSS directement.
1- Nous avons besoin d'un navigateur moderne qui puisse interpréter les exemples que nous allons traiter, cela peut être Google Chrome ou alors Édition développeur de Firefox.
2- Nous devons avoir un éditeur de texte dans le style par Sublime Texte ou NotePad ++ pour pouvoir écrire nos exemples plus confortablement.
3- Enfin, nous avons besoin d'autorisations pour installer des éléments via la console de commande et d'une connexion Internet pour télécharger les ressources nécessaires.
InstallationL'installation de Moins.js Cela peut se faire de deux manières, la première directement au niveau du client, et la seconde dans un environnement serveur tel que Node.jsVoyons chacun de ces moyens ci-dessous.
Cette forme d'installation est aussi simple que d'appeler simplement le fichier qui contient la bibliothèque Moins.js, et il est simplement déjà inclus dans notre environnement. Pour télécharger la bibliothèque, il suffit d'aller sur lesscss.org et de télécharger la dernière version stable.

AGRANDIR

Une fois que nous avons le fichier téléchargé, nous pouvons continuer à faire un petit exemple qui nous aidera à savoir si notre environnement est prêt à se développer avec Moins.js, c'est pourquoi nous devons effectuer les étapes suivantes :
1- Nous allons créer un dossier et à l'intérieur créer un fichier appelé index.html, alors nous trouverons le fichier moins.min.js à l'intérieur du dossier dist de la version de Moins.js que nous avons téléchargé, nous allons également créer un fichier appelé styles.moins, la structure de ce que nous avons décrit devrait ressembler à ce que nous voyons ci-dessous :

2- Ensuite, nous allons écrire le code suivant ci-dessous dans notre index.html afin que nous ayons quelque chose que nous pouvons appliquer le CSS et donc vérifiez les styles:

 Premiers pas avec Less.js Notre entête Le contenu Notre pied de page

On voit ici tout d'abord une structure HTML de base, où dans le corps nous avons mis une étiquette entête, une marque section et enfin une étiquette bas de page, cela nous donne trois éléments totalement différents auxquels nous pouvons appliquer des styles CSS.
3- Maintenant à l'intérieur de l'étiquette diriger du code précédent nous allons incorporer notre fichier styles.moins et après cette inclusion le fichier moins.js, à ce stade, il est très important de souligner que moins.js il sera toujours inclus après nos fichiers .moins que les styles porteront, et il est également important de noter que les fichiers .moins que nous incluons doit avoir l'attribut réel comme suit: rel = "feuille de style / moins" car sans cela le compilateur moins ils ne sauront pas qu'ils doivent travailler avec ce fichier. Voyons à quoi ressemblera notre balise head avec le code supplémentaire à ajouter au code de l'étape précédente :

 Premiers pas avec Less.js 

4- Il ne nous reste plus qu'à ajouter quelques styles CSS à l'intérieur du fichier styles.moins, le code ci-dessous ce qui fera est de différencier les différentes étiquettes que nous créons avec différentes couleurs :

 header {color: blue;} section {color: gray;} footer {color: yellow;}

5- Si nous ouvrons notre index.html avec un navigateur, nous verrons comment le style a changé, et si nous ouvrons une console de développement, nous verrons les messages qu'il imprime moins.js Pour nous faire savoir que cela fonctionne, voyons dans l'image suivante à quoi cela ressemble :

Nous pouvons même faire un exercice un peu plus approfondi et nous pouvons ouvrir le code source de notre exemple dans le navigateur et voir comment moins.js généré un code CSS dans notre document que nous n'incluons pas :

Côté serveurL'installation côté client est très utile lorsque nous développons, car elle nous permet de faire une sorte de déboguer en temps réel, observant ainsi les changements du moment, cependant pour un environnement de production ce n'est pas du tout recommandé, en premier lieu nous perdons du temps en Moins.js génère les feuilles de style, et d'autre part parce que nous téléchargeons nos fichiers .moins qui peut être copié par d'autres personnes. C'est pourquoi nous allons maintenant voir comment travailler avec Moins.js lors de l'installation de votre compilateur, pour cela nous utiliserons le gestionnaire de paquets npm.
Nous devons avoir un exemple de npm fonctionnel, c'est pourquoi nous vous recommandons d'installer la dernière version de Node.js pour notre système d'exploitation.
Nous avons également besoin d'autorisations suffisantes pour pouvoir installer des packages avec npm, et pour exécuter des instructions au niveau de la console de commande, ceci est très important surtout dans les environnements Linux Oui Mac, de sorte qu'en les fenêtres les permis sont plus faciles à traiter à ce niveau.
1- A partir d'une console de commande, nous devons exécuter l'instruction suivante avec npm:

 npm install -g moins

2- L'étape précédente nous a fait installer le compilateur Moins.js, appelé moins, ce qu'il fait, c'est qu'il transforme notre code moins en code CSS valide pour une utilisation dans un navigateur, nous allons donc le tester, pour cela nous allons créer un fichier appelé exemple.moins avec le code suivant à l'intérieur :

 @color: bleu; .highlight () {color: @color;} p {.highlight ();}

3- Une fois ce qui précède fait, nous allons dans notre console et exécutons l'instruction suivante pour générer un fichier .css où reposera notre code compilé :

 lessc exemple.less> exemple.css

Dans notre fichier résultant, nous obtiendrons ce que nous voyons dans l'image suivante :

Si nous voulons un résultat compressé ou minifié il suffit d'ajouter le -x paramètre après avoir appelé moins comme le suivant :

 lessc -x exemple.less> exemple.css

Ce qui nous donne ce qui suit css minifié par conséquent:

Dans le dernier exemple des installations selon le mode d'utilisation nous avons vu que placer la couleur sur une simple étiquette p nous faisons plusieurs choses, d'abord nous définissons une variable de couleur avec le @ modificateur, cela signifie que nous pouvons appeler des couleurs ou des valeurs dans des variables tout au long de notre document, nous pouvons donc avoir une variable @colorTitle et avec cela, nous savons que partout où nous voulons utiliser la couleur du titre, nous ne faisons que cet appel.
Routines réutilisablesUne autre chose que nous avons vue, c'est que nous avons créé une fonction appelée .point culminant () et à l'intérieur on place un attribut CSS et sa valeur était notre variable, c'est un autre exemple de la façon dont nous pouvons créer des routines réutilisables dans nos styles, donc dans n'importe quelle classe ou attribut que nous voulons mettre en évidence quelque chose, nous devons juste appeler cette fonction comme nous l'avons fait à l'intérieur de l'élément p dans le Exemple.
On voit ainsi que l'importance de Moins.js c'est que cela nous aide à réfléchir davantage à comment faire moins, et ainsi aboutir à un code compressé, valide et facile à lire à la fin, dans l'exemple on aurait pu dire que beaucoup a été écrit pour si peu CSS résultant, mais l'idée est que lorsque nous devons faire beaucoup de CSS, nous écrivons moins, donc nous voyons que Moins.js il s'avère que lorsque nous faisons de grandes feuilles de style.
Avec cela, nous terminons ce tutoriel, nous avons appris à faire nos premiers pas avec Moins.js, nous avons donc maintenant de bons outils pour pouvoir créer de superbes applications ou pages Web en utilisant le moins de code possible.