Exercício 1

Construir uma página que use o Less.
É obrigatório usar:
* Variáveis, funções, cálculos e hierarquia.

Exemplo de como usar as variáveis no Less!

Veja como é o código:

print da tela do VScode, mostrando o código, de como é feita a hierarquia

@cor-azul: essa é a variável que vai receber a cor blue;

Aqui já é uma função do Less.
@largura: essa variável vai receber 1
* mas na hora de passar para a tag, tem que usar assim:
width: percentage(@largura);
Por asssim você está passando a porcentagem, que será 100%

Exemplo de como usar o Less com hierarquia!
Aqui temos um texto com uma cor e dentro dele outra cor.
Aqui está o exemplo, como fica na página.
Veja como é o código:

print da tela do VScode, mostrando o código, de como é feita a hierarquia

Aqui vemos a função Math.
Usaremos a soma, que vai somar mais 10 pixes a mais,
no valor que estiver na variável @tamanho-texto.

// essa seria a variável
@tamanho-texto: 16px;
que tem o valor de 16 pixes.
Veja como fica na hora de passar o código:

print da tela do VScode, mostrando o código, de usar o Math para somar

Aqui vamos usar o Math com cores.

A cor orginal é multiplicada isso causa uma diferença na tonalidade das cores.
Veja como exemplo as cores abaixo:

cor: # efe22378;
cor: # efe22378 * 1.0; vai ficar -> efe223;
cor: # efe22378 * 1.5; vai ficar -> ffff35;
cor: # efe22378 * 2.0; vai ficar -> ffff46;
cor: # efe22378 * 2.5; vai ficar -> ffff58;