CSS Avançado

Menu


Próxima página

Página anterior

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:
print da tela do VScode mostrando as variáveis

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:
print da tela do VScode mostrando a hierarquia das variáveis

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:
print da tela do VScode mostrando a função de alterar largura.

Agora veja é a página antes de usar o width:
print da tela da página, antes de usar o width.

Depois de usar o width:
print da tela da página, 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:
print da tela do VScode, 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:
print da página, com erro na variável cor.

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:
print da tela do VScode mostrando como fica o mixings.


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:
print da tela do VScode, como passar o parâmetro.


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:
print da tela do VScode, usando o if no less.

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:
print da tela do VScode, usando Math que esta fazendo a soma.


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:
print da tela do VScode, usando Math que está fazendo a multiplicação


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:
print da tela do VScode, usando Math que está fazendo a mudança de tonalidade da cor

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:
print da tela do VScode, usando Math que está fazendo a mudança de tonalidade da cor

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:
print da tela do VScode, do código index.js

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:
print da tela do VScode, do código less.ejs parte 1
print da tela do VScode, do código less.ejs parte 2

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.
print da tela do VScode, do código historia.ejs

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:
print da tela do VScode, do código style.less parte 1
print da tela do VScode, do código style.less parte 2

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

Exercício 1

Crie um projeto.
Você pode usar usa página sua como base, criando uma cópia.
Sugiro usar o Node.js.
Se já tiver um CSS pode apenas convertê-lo para LESS.
Obrigatório
* Usar variáveis, funções, cálculos e hierarquia.

Link da página que eu criei:
pagina exercício 1 less

Próxima página
Página anterior