Primeiros passos com Less.js

O desenvolvimento de aplicativos da Web nos leva por muitos caminhos, mas todos esses caminhos têm uma coisa em comum: código HTML e código CSS, o que nos dá muitas possibilidades de fazer com que nossos aplicativos tenham a aparência que desejamos ou imaginamos.
O que acontece agora é que como cada pessoa tem sua forma de desenvolvimento, muitas vezes os códigos resultantes são muito extensos ou um tanto confusos, isso faz com que a manutenção e o desempenho sejam um pouco afetados. É aí que entram as bibliotecas e os pré-processadores que nos ajudam a escrever um código um pouco mais limpo e eficiente, ajudando assim o trabalho em equipe também, já que muitas dessas bibliotecas nos fazem escrever um código melhor.
Less.jsO nome Less.js é originado da combinação das palavras CSS Leaner, algo assim como CSS mais fino ou reduzido, o que já nos dá uma ideia do que esse pré-processador vai fazer, o que nada mais é do que nos ajudar a escrever menos código CSS, melhorando assim a legibilidade e o desempenho de nossos aplicativos e páginas web. É baseado em JavaScript então podemos usá-lo no lado do cliente, embora esta prática não seja recomendada para produção, ou também no lado do servidor, graças ao npm e Node.js, para que possa se tornar o plug-in de alguns Framework JavaScript que estamos dirigindo no momento.
A ideia principal a adotar Less.js em nosso ambiente de desenvolvimento, é ajudar a cumprir o princípio SECO, o que significa não nos repetir, e conseguir isso Less.js incorpora funções, classes e variáveis ​​que nos possibilitam escrever um código muito mais reutilizável do que o que escreveríamos em CSS diretamente.
1- Precisamos de um navegador moderno que possa interpretar os exemplos com os quais trataremos, pode ser Google Chrome ou Firefox Developer Edition.
2- Devemos ter um editor de texto no estilo por Sublime Text ou NotePad ++ para poder escrever nossos exemplos de maneira mais confortável.
3- Finalmente, precisamos de permissões para instalar os elementos via console de comando e uma conexão com a Internet para baixar os recursos necessários.
InstalaçãoA instalação de Less.js Isso pode ser feito de duas maneiras, a primeira diretamente no nível do cliente e a segunda em um ambiente de servidor, como Node.jsVamos ver cada uma dessas maneiras a seguir.
Esta forma de instalação é tão fácil quanto simplesmente chamar o arquivo que contém a biblioteca Less.js, e simplesmente já está incluído em nosso ambiente. Para baixar a biblioteca, só temos que ir para lesscss.org e baixar a última versão estável.

PROLONGAR

Assim que tivermos o arquivo baixado, podemos continuar a fazer um pequeno exemplo que nos ajudará a saber se temos nosso ambiente pronto para desenvolver com Less.js, é por isso que devemos realizar as seguintes etapas:
1- Vamos criar uma pasta e dentro de criar um arquivo chamado index.html, então encontraremos o arquivo less.min.js dentro da pasta dist da versão de Less.js que baixamos, além disso, vamos criar um arquivo chamado styles.less, a estrutura do que descrevemos deve ser semelhante ao que vemos abaixo:

2- Então vamos escrever o seguinte código abaixo dentro de nosso index.html para que tenhamos algo, podemos aplicar o CSS e então verifique os estilos:

 Primeiros passos com Less.js Nosso cabeçalho O conteúdo Nosso rodapé

Aqui, vemos antes de tudo uma estrutura HTML básico, onde dentro do corpo nós colocamos uma etiqueta cabeçalho, um rótulo seção e finalmente um rótulo rodapé, isso nos dá três elementos totalmente diferentes aos quais podemos aplicar estilos CSS.
3- Agora dentro da etiqueta cabeça do código anterior, vamos incorporar nosso arquivo styles.less e após esta inclusão o arquivo less.js, neste ponto é muito importante enfatizar que less.js sempre será incluído após nossos arquivos .menos que os estilos irão transportar, e também é importante observar que os arquivos .menos que incluímos deve ter o atributo rel da seguinte forma: rel = "folha de estilo / menos" já que sem isso o compilador menos eles não saberão que devem trabalhar com aquele arquivo. Vamos ver como nossa tag head ficará com o código adicional a ser adicionado ao código da etapa anterior:

 Primeiros passos com Less.js 

4- Agora só temos que adicionar alguns estilos CSS dentro do arquivo styles.less, o código abaixo o que fará é diferenciar os diferentes rótulos que criamos com cores diferentes:

 cabeçalho {cor: azul;} seção {cor: cinza;} rodapé {cor: amarelo;}

5- Se abrirmos nosso index.html com um navegador, veremos como o estilo mudou e, se abrirmos um console de desenvolvedor, veremos as mensagens que ele imprime less.js Para nos informar que está funcionando, vamos ver na imagem a seguir como é:

Podemos até fazer um exercício um pouco mais aprofundado e podemos abrir o código-fonte do nosso exemplo no navegador e ver como less.js gerou um código CSS em nosso documento que não incluímos:

No lado do servidorA instalação do lado do cliente é muito útil quando estamos desenvolvendo, pois nos permite fazer uma espécie de depurar em tempo real, observando assim as mudanças no momento, porém para um ambiente de produção não é recomendado de forma alguma, em primeiro lugar estamos perdendo tempo enquanto Less.js gera as folhas de estilo e, em segundo lugar, porque carregamos nossos arquivos .menos que pode ser copiado por outras pessoas. É por isso que agora veremos como trabalhar com Less.js ao instalar o seu compilador, para isso usaremos o gerenciador de pacotes npm.
Devemos ter uma instância de npm funcional, é por isso que recomendamos instalar a versão mais recente do Node.js para nosso sistema operacional.
Também precisamos de permissões suficientes para poder instalar pacotes com npm, e para executar instruções no nível do console de comando, isso é muito importante, especialmente em ambientes Linux Y Mac, de modo que em janelas as licenças são mais fáceis de processar neste nível.
1- A partir de um console de comando, devemos executar a seguinte instrução com npm:

 npm install -g less

2- A etapa anterior nos fez instalar o compilador Less.js, chamado lessc, isso o que ele faz é transformar nosso código menos em código CSS válido para uso em um navegador, então vamos testá-lo, para isso criaremos um arquivo chamado sem exemplo com o seguinte código dentro:

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

3- Uma vez feito o acima, vamos ao nosso console e executamos a seguinte instrução para gerar um arquivo .css onde nosso código compilado ficará:

 lessc example.less> example.css

Em nosso arquivo resultante, obteremos o que vemos na imagem a seguir:

Se quisermos um resultado compactado ou minimizado apenas adicione o parâmetro -x depois de ligar lessc como o seguinte:

 lessc -x exemplo.less> exemplo.css

O que nos dá o seguinte css minimizado como resultado:

No último exemplo das instalações de acordo com a forma de uso vimos que colocar a cor em uma simples etiqueta p fazemos várias coisas, primeiro definimos uma variável de cor com o @ modificador, isso significa que podemos chamar cores ou valores dentro de variáveis ​​em todo o nosso documento, para que possamos ter uma variável @colorTitle e com isso sabemos que em qualquer lugar que desejamos usar a cor do título, fazemos apenas essa chamada.
Rotinas reutilizáveisOutra coisa que vimos foi que criamos uma função chamada .destaque () e dentro colocamos um atributo CSS e seu valor era nossa variável, este é outro exemplo de como podemos construir rotinas reutilizáveis ​​dentro de nossos estilos, então em qualquer classe ou atributo que desejamos destacar algo, apenas temos que chamar essa função como fizemos dentro do elemento p no exemplo.
Assim, vemos que a importância de Less.js é que nos ajuda a pensar mais em como fazer menos, e assim resultar com um código compactado, válido e de fácil leitura no final, no exemplo poderia-se dizer que muito foi escrito por tão pouco CSS resultante, mas a ideia é que quando temos que fazer muito CSS, escrevemos menos, então vemos que Less.js Acontece quando fazemos grandes folhas de estilo.
Com isso terminamos este tutorial, aprendemos a dar nossos primeiros passos com Less.js, então agora temos boas ferramentas para construir ótimos aplicativos ou páginas da web usando a menor quantidade de código possível.