Variáveis


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.

Exemplos 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
}
A boa notícia é que podemos declarar variáveis em um tipo de “escopo global”, que nada mais é do que a raiz do documento, para isso utilizamos o seletor :root.

Exemplo de variáveis declaradas na raiz do documento:

	
:root {
  --tamanho: 50%;
  --cor: #660066;
}
 
.exemplo-1 {
  margin: var(--tamanho); // retorna 50%
}
 
.exemplo-2 {
  color: var(--cor); // retorna #660066
}





Comentários

Copyright © 2018 Anderson Bravo
www.andersonbravo.com.br
anderson@andersonbravo.com.br