Article image
RAFAEL SANTOS
RAFAEL SANTOS26/06/2022 04:04
Compartilhe

CRIAR VARIÁVEIS NO CSS

  • #HTML
  • #JavaScript
  • #CSS

Olá pessoal!

No CSS é possível criar variáveis, que podem ser utilizadas para estilizar sua página com mais agilidade.

No CSS, declaramos as variáveis no seletor ":root{}", ao qual será reconhecido em toda página do CSS.

:root {
}

A declaração das variáveis deverá iniciar com "--".

:root{
--nomedavariavel: ; 
}

Em seguida poderá atribuir um valor, no caso do exemplo, irei setar uma cor em hsl.

:root{
--nomedavariavel: hsl(205, 88%, 45%);
}

Utilizando a variável:

Para utilizar a variável, você deverá incluir o valor "var()", e dentro dos parênteses será necessário informar a variável criada.

.nomedaclasse{
background-color: var(--nomedavariavel);
}

Esse método facilita a estilização, economizando seu tempo.

Até a próxima...

Compartilhe
Comentários (5)

OR

Orvando Raúl - 01/07/2022 09:47

Valeu, conteúdo interessante.


Italo Santos
Italo Santos - 29/06/2022 20:20

Boa dica, achei muito legal, valeu!

Wendell Costa
Wendell Costa - 30/06/2022 03:15

Vou aderir a meu novo portfólio!

Matheus Coimbra
Matheus Coimbra - 26/06/2022 14:28

Ótima dica! Ajuda bastante a legibilidade do código

Murilo Neto
Murilo Neto - 26/06/2022 04:09

Olá, Rafael. Que bacana, valeu pela dica!