MOINS - Installation

Dans ce chapitre, nous allons comprendre, étape par étape, comment installer LESS.

Configuration système requise pour LESS

  • Operating System - Multiplateforme

  • Browser Support - IE (Internet Explorer 8+), Firefox, Google Chrome, Safari.

Installation de LESS

Voyons maintenant l'installation de LESS.

Step 1 - Nous avons besoin NodeJspour exécuter MOINS d'exemples. Pour télécharger NodeJs, ouvrez le lienhttps://nodejs.org/en/, vous verrez un écran comme indiqué ci-dessous -

Téléchargez la version Dernières fonctionnalités du fichier zip.

Step 2- Exécutez le programme d'installation pour installer Node.js sur votre système.

Step 3- Ensuite, installez LESS sur le serveur via NPM (Node Package Manager). Exécutez la commande suivante dans l'invite de commande.

npm install -g less

Step 4 - Après une installation réussie de LESS, vous verrez les lignes suivantes sur l'invite de commande -

`-- [email protected]
   +-- [email protected]
   | `-- [email protected]
   +-- [email protected]
   +-- [email protected]
   +-- [email protected]
   +-- [email protected]
   | `-- [email protected]
   +-- [email protected]
   | `-- [email protected]
   +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | |   +-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | | +-- [email protected]
   | | | +-- [email protected]
   | | | | `-- [email protected]
   | | | +-- [email protected]
   | | | +-- [email protected]
   | | | | `-- [email protected]
   | | | +-- [email protected]
   | | | `-- [email protected]
   | | +-- [email protected]
   | | | `-- [email protected]
   | | +-- [email protected]
   | | | +-- [email protected]
   | | | +-- [email protected]
   | | | | `-- [email protected]
   | | | +-- [email protected]
   | | | `-- [email protected]
   | | `-- [email protected]
   | |   `-- p[email protected]
   | +-- [email protected]
   | | +-- [email protected]
   | | +-- [email protected]
   | | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | | +-- [email protected]
   | | +-- [email protected]
   | | | +-- [email protected]
   | | | +-- [email protected]
   | | | `-- [email protected]
   | | `-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   | `-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   +-- [email protected]
   | |   `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | | `-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | +-- [email protected]
   | `-- [email protected]
   `-- [email protected]

Exemple

Voici un exemple simple de MOINS.

bonjour.htm

<!doctype html>
   <head>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>
   
   <body>
      <h1>Welcome to TutorialsPoint</h1>
      <h3>Hello!!!!!</h3>
   </body>
</html>

Créons maintenant un fichier style.less qui est assez similaire au CSS, la seule différence est qu'il sera enregistré avec l' extension .less . Les fichiers .html et .less doivent être créés dans le dossiernodejs.

sans style

@primarycolor: #FF7F50;
@color:#800080;
h1 {
   color: @primarycolor;
}

h3 {
   color: @color;
}

Compilez le fichier style.less dans style.css en utilisant la commande suivante -

lessc style.less style.css

Lorsque vous exécutez la commande ci-dessus, elle crée automatiquement le fichier style.css . Chaque fois que vous modifiez le fichier LESS, il est nécessaire d'exécuter la commande ci-dessus dans lecmdpuis le fichier style.css sera mis à jour.

Le fichier style.css aura le code suivant lorsque vous exécuterez la commande ci-dessus -

style.css

h1 {
  color: #FF7F50;
}

h3 {
  color: #800080;
}

Production

Examinons maintenant les étapes suivantes pour voir comment fonctionne le code ci-dessus -

  • Enregistrez le code html ci-dessus dans le hello.htm fichier.

  • Ouvrez ce fichier HTML dans un navigateur, la sortie suivante s'affichera.