Less
* É um pré-processador CSS, vai ler um arquivo e transformar em CSS.
* Amplia a capacidade do CSS e copila mais rápido que os outros processadores.
* É baseado em JavaScript (não precisa conhecer a linguagem para usar o Less).
* Reduz redudância de códigos.
* Usado por várias empresas e frameworks, como o booTstrap.
* Permiti o uso de variáveis, funções, cálculos ehierarquia.
Site:
Lesscss.org
É recomendável acessar a documentação dele , que está no site, para ter mais detalhes.
Link do site:
Lesscss.org
* Instalação no Node.js: (Não é obrigatório pois funciona sem instalação)
npm install less
Less na prática
Não é necessário sua instalação, mais para evitar erros instale, usando o node ou outro
*Arquivo HTML
< link rel="stylesheet/less" type="text/css" href="style.css" / >
A parte importante do link é o :
stylesheet/less, onde faz a definição do processamento.
href="style.csss" pode ser também href="style.less"
Less => Variáveis
Usa o " @ ", exemplo @cor .
Ao invés de usar um determinado valor, você usa a variável.
Facilita a mudança de propriedade do CSS de forma mais dinâmica e rápida.
Veja na imagem:
Less => Hierarquia
Pode ser usado de forma mais intuitiva, colocando um dentro do outro.
Exemplo:
____P {
________color: @cor-rosa;
________b{
___________color: @cor-vermelho;
_________}
_____}
Na prática, veja como fica na imagem:
Less => Função
Permite a manipulação de valores aparti de uma lista predefinida pelo Less.
Permiti transformar um valor noutro, manipular condicionais, fazer cálculos, etc..
Para saber mais e ver as funções e exemplos, veja a documentação que está no site:
Lesscss.Funções
Less => Função na prática
Definindo o Width (largura)
Adicione uma variável no Less, que seja intuitiva, que você saiba do que se trata.
@largura: 0.75 * use o ponto para números decimais *
E coloque a variável onde você quer que seja dessa largura.
Mas tem que adicionar a "percentagem" por que o width espera isso.
width: percentage(@largura); *percentage -> converte para porcentagem o valor da variável.
Veja o print da tela do programa VScode, como fica:
Agora veja é a página antes de usar o width:
Depois de usar o width:
Condicional
Usando uma condicional, para fazer uma verificação usando o if.
Se for uma cor, permanece a cor, se não for uma cor válida, vai mudar para outra cor.
color: if (iscolor(@cor1 ),@cor1, red)
Veja como fica o código do programa:
Como a cor não está correta, ela não vai ser exibida, ai a cor "red" aparece no lugar.
Veja como fica na página:
Existe várias outras formas e modos de usar as Funções.
Para saber mais e ver as funções e exemplos, veja a documentação que está no site:
Lesscss.Funções
Less => Mixins
Usado quando há itens iguais em mais de um seletor e acaba usando a mesma estrutura de função.
É como criar "funtions" dentro do CSS, com passagem ou não de um parâmetro.
Possibilita o uso de valores padrão.
Evita repetições.
A forma de criar é assim:
.cores(){
____* aqui dentro você adiciona as cores e/ou outros parâmetros ...*
____}
Para colocar em prática é assim, vai passar as cores para o "h1" e o "p":
h1 {
_____ .cores(); "Vai receber as cores passadas."
}
p {
_____ .cores(); "Vai receber as cores passadas."
}
Mixins => Colocando em prática
Como colocar em prática, usando para cores repetidas.
No exemplo temos duas cores repetidas, para facilitar vamos adicionar as duas dentro do:
___ .cores(){
________color: @cor-azul;
}
Quando quiser adicionar essa cor, só adicionar o ".cores();"
Veja como fica o código do programa:
Podemos usar parâmetros também.
Você cria o mixins:
.cores( @tamanho ) { -> aqui está passando o parâmetro -> @tamanho
___ color: @cor;
___ font-size: @tamanho;
}
Quando adicionar na tag, você passa o valor do font-size, que vai para a variável -> @tamanho.
h1 {
____ .cores(45px);
}
Veja o código como fica:
Condicionais IF
Pode ser usado para fazer alguma condição de correção.
Faz uma verificação nas informações que você recebe, se veio "isso" faça "aquilo".
// Se @color estiver vazia
& when( @color ='') {
____// vai deixar dessa cor
____color: darkgreen;
// senão
} else {
____// vai deixar dessa cor
____ color: @color;
}
Colocando em prática:
Cria as tags de estilos, no Less:
h1 {
___.cores(45px, 'h1'); -> adiciona o mixins
}
p{
____.cores(42px, 'p'); -> adiciona o mixins
}
Criamos o mixins:
// vai receber dois parâmetros,tamanho e a tag.
.cores(@tamanho, @tag){
____ color: @cor-azul;
____ font-size: @tamanho;
____ // se o valor do @tag for igual a tag "h1"
____& when (@tag ='h1'){
____ // fará isso colocará um efeito de sombra
____ text-shadow: 2px 1px 1px #7a7b7c;
____ }
____ // se o valor da @tag for igual a tag "p"
____ & when (@tag ='p'){
____ // colocar essa cor de fundo
_________ background-color: aqua;
____ }
__ }
Veja o código como fica:
Math -> Operadores Matemáticos no Less
Ao fazer uma configuração, a definição de um estilo,
você pode fazer cálculos para definir padrões porpocionalidades.
* Funciona também com cores.
* Opções: + - * / (adição, subtração, multiplicação, divisão).
Devido as versões do Less, em algumas o "/" (divisão) não funciona.
Colocando em prática:
Usando para somar o valor do tamanho da fonte de um texto.
Foi criado a variável => @tamanho: 50px;
Se adicionar outro número na variável, será somado também.
Veja o código como fica:
Multiplicando
Usando para multiplicar o valor do tamanho da fonte de um texto.
Foi criado a variável => @tamanho: 20px;
Se adicionar outro número na variável será realizado a multiplicação.
Veja o código como fica:
Usando o Math nas cores
Dá para fazer modificações nas cores, alterar sua tonalidade.
Foi criado a variável => @cor-azul: blue; uma cor sólida.
Aqui será acrescentado a modificação, a conta.
.cores(@tag) {
____ color: @cor-azul*1.8;
____ // se a tag for igual a "p"
____ & when (@tag ='p'){
_________ font-size: @tamanho + 5;
_____ }
....}
Veja o código como fica:
Erros, como evitar eles
Vamos ver alguns possivéis erros que podem acontecer.
variable @cor1-azul is undefined
Esse erro acontece por que alguma variável, está errada ou não foi definida corretamente.
Veja a imagem de como fica no VScode, e embaixo no terminal o que diz sobre o erro:
No terminal, acusa que o erro está na linha 10, coluna 3.
Mas o erro, não está lá, na linha 10 tem o:
h1 {
____.cores('h1'); é o mixins que dentro dele possui o erro.
}
Então o erro fica aqui no mixins:
.cores(@tag) {
____ color: @cor1-azul*1.8;
____ // se a tag for igual a "p"
}
O terminal avisa sobre o erro, avisa qual é o erro, e onde está ou ali perto.
Exemplo:
No terminal aparece assim, o aviso sobre o erro:
variable @cor_cinza_claro2 is undefined ln6, Col 21
background-color: @cor_cinza_claro2; <-- aqui está o erro, o 2 está errado.
Importante, após arrumar a variável, lembre-se de salvar o projeto para atualizar e resolver o erro.
Há vários outros erros que podem ocorrer, fique sempre atento quando estiver escrevendo seu código.
Criando um projeto em NODE e usando o Less (parte 1)
Vamos iniciar um projeto simples para usar o Less.
Abra o VScode e no pront de comando do VScode, adicione esses comandos:
// Para criar uma pasta
mkdir *adicione um nome*
// comando para abrir a pasta que foi criada
cd *nome da pasta8
// comando para iniciar o projeto
npm init -y
// vamos utilizar o Express que é um framework para aplicações web do Node.js
// que irá nos auxiliar em diversas situações, como por exemplo na criação de um servidor
// e gerenciamento de rotas, que é o que vamos fazer.
npm install express
// instalei o Express
npm install express
// instalei o 'ejs'
npm install ejs
// Para instalar o Less
npm install less
// Abra a Pasta que você criou, no VScode, e no pront de comando, coloque:
// Para rodar o programa
node index.js
Criando um projeto em NODE e usando o Less (parte 2)
Agora com o projeto aberto no VScode.
Crie um arquivo com o nome index.js
Veja a imagem do código feito no VScode:
Crie uma pasta com o nome views, e dentro dela adicione esses arquivos:
Less é apenas uma página de html normal, só para testar o Less.
Veja a imagem do código feito no VScode:
A outra página que iremos criar é a página historia
Que é igual a outra página less, só modifica o nome e o link para a página less.
Agora vamos criar uma pasta chamada public, e dentro dela,
uma pasta com o nome _css e dentro dela coloque:
o arquivo -> styles.less.
Veja a imagem do código feito no VScode:
Importante
** Pode ser necessário usar esse comando para pode usar o LESS:
lessc styles.less styles.css
Link da página que eu criei:
pagina teste less
Para mais informações sobre o less, acesse o site, que contém a documentação:
lesscss.org