Tecnologia

Variáveis no CSS

Para declarar uma variável em CSS utilizamos as chamadas Custom Properties, uma nova forma de declarar uma propriedade utilizando a seguinte sintaxe:


.exemplo {
	--destaque: #660066;
}

Para utilizar a variável declarada utilizamos a função var(), passando a variável criada como parâmetro, assim ela irá retornar o valor da variável. Veja o exemplo a seguir:


.exemplo {
	--destaque: #660066;
	background-color: var(--destaque);
}

As variáveis tem um escopo a ser seguido, logo uma variável não pode ser usada fora de seu escopo.


/* Exemplo de utilização correta do escopo */
.menu {
  --tamanho: 20px;
}
.menu ul li {
  padding: var(--tamanho); // retorna 20px
}


/* Exemplo de utilização incorreta do escopo */
.menu {
  --tamanho: 20px;
}
.footer {
  padding: var(--tamanho); // não retorna nada
}

Também podemos declarar variáveis no “escopo global”, que nada mais é do que a raiz do documento. Para isso utilizamos o seletor :root.


:root {
  --tamanho: 50%;
  --cor: #660066;
}
 
.exemplo-1 {
  margin: var(--tamanho); // retorna 50%
}
 
.exemplo-2 {
  color: var(--cor); // retorna #660066
}
2020 © B85 Tecnologia
eu@andersonbravo.com.br