MENOS - Instalação

Neste capítulo, vamos entender, passo a passo, como instalar o LESS.

Requisitos do sistema para LESS

Operating System - Plataforma cruzada
Browser Support - IE (Internet Explorer 8+), Firefox, Google Chrome, Safari.

Instalação de LESS

Vamos agora entender a instalação do LESS.

Step 1 - precisamos NodeJspara executar MENOS exemplos. Para baixar NodeJs, abra o linkhttps://nodejs.org/en/, você verá uma tela conforme mostrado abaixo -

Baixe a versão mais recente dos recursos do arquivo zip.

Step 2- Execute a configuração para instalar o Node.js em seu sistema.

Step 3- Em seguida, instale LESS no servidor via NPM (Node Package Manager). Execute o seguinte comando no prompt de comando.

npm install -g less

Step 4 - Após a instalação bem-sucedida do LESS, você verá as seguintes linhas no prompt de comando -

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

Exemplo

A seguir está um exemplo simples de LESS.

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

Vamos agora criar um arquivo style.less que é bastante semelhante ao CSS, a única diferença é que ele será salvo com a extensão .less . Ambos os arquivos, .html e .less, devem ser criados dentro da pastanodejs.

style.less

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

h3 {
   color: @color;
}

Compile o arquivo style.less para style.css usando o seguinte comando -

lessc style.less style.css

Quando você executa o comando acima, o arquivo style.css é criado automaticamente. Sempre que você alterar o arquivo LESS, é necessário executar o comando acima nocmde então o arquivo style.css será atualizado.

O arquivo style.css terá o seguinte código quando você executar o comando acima -

style.css

h1 {
  color: #FF7F50;
}

h3 {
  color: #800080;
}

Resultado

Vamos agora realizar as seguintes etapas para ver como o código acima funciona -

Salve o código html acima no hello.htm Arquivo.
Abra este arquivo HTML em um navegador, a seguinte saída será exibida.