MENO - Installazione

In questo capitolo capiremo, passo dopo passo, come installare LESS.

Requisiti di sistema per LESS

  • Operating System - Cross-platform

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

Installazione di LESS

Cerchiamo ora di capire l'installazione di LESS.

Step 1 - Ci serve NodeJsper eseguire MENO esempi. Per scaricare NodeJs, apri il linkhttps://nodejs.org/en/, vedrai una schermata come mostrato di seguito -

Scarica la versione con le funzionalità più recenti del file zip.

Step 2- Esegui il setup per installare Node.js sul tuo sistema.

Step 3- Successivamente, Installa MENO sul server tramite NPM (Node Package Manager). Esegui il seguente comando nel prompt dei comandi.

npm install -g less

Step 4 - Dopo aver installato correttamente LESS, vedrai le seguenti righe sul prompt dei comandi -

`-- [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]
   | |   `-- [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]

Esempio

Di seguito è riportato un semplice esempio di LESS.

ciao.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>

Creiamo ora un file style.less che sia abbastanza simile a CSS, l'unica differenza è che verrà salvato con estensione .less . Entrambi i file, .html e .less dovrebbero essere creati all'interno della cartellanodejs.

style.less

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

h3 {
   color: @color;
}

Compilare il file style.less in style.css utilizzando il seguente comando:

lessc style.less style.css

Quando esegui il comando precedente, creerà automaticamente il file style.css . Ogni volta che si modifica il file LESS, è necessario eseguire il comando precedente nel filecmde quindi il file style.css verrà aggiornato.

Il file style.css avrà il seguente codice quando esegui il comando precedente:

style.css

h1 {
  color: #FF7F50;
}

h3 {
  color: #800080;
}

Produzione

Eseguiamo ora i seguenti passaggi per vedere come funziona il codice sopra:

  • Salva il codice html sopra nel file hello.htm file.

  • Apri questo file HTML in un browser, verrà visualizzato il seguente output.