Utilizando variáveis em CSS (nativamente)

CSS

Nenhum produto encontrado nessa seleção.

O Módulo sobre variáveis em CSS do W3C ainda está em fase de rascunho, e pode ser modificado há qualquer momento, porém, a Mozilla já introduziu o recurso no Firefox 31 (ou superior) e já podemos ver como tudo vai funcionar em um futuro próximo (assim espero).

Se você já utilizou ou utiliza qualquer pré-processador de CSS (como Sass), variáveis já devem estar no seu costume de desenvolvimento, caso contrário esse tutorial vai detalhar exatamente como você deve fazer para criar variáveis nativas em CSS.

O CSS que conhecemos

Conforme sabemos, definimos uma regra CSS utilizando o seguinte:

  • Um (ou mais) seletor(es)
  • Uma abertura de chave {
  • Uma propriedade
  • Dois pontos :
  • Um valor
  • Ponto e vírgula ;
  • Fechamento da chave }

Veja na imagem abaixo:

Regra CSS

Regra CSS

Utilizaremos este mesmo formato para criar propriedades customizadas (ou variáveis nativas do CSS).

Criando uma variável em CSS

Para criar uma variável em CSS, utilizamos o seguinte formato:

seletor {
  --nome-da-variavel: valor;
}

Ou seja, o mesmo formato do CSS que já conhecemos.

Veja alguns detalhes sobre as variáveis nativas do CSS:

  • Variáveis são definidas por seletor (como se fossem variáveis locais), ou seja, elas não estarão disponíveis para outros seletores;
  • Variáveis sofrem o efeito cascata, isso quer dizer que os filhos de um elemento poderão acessar as variáveis de seus elementos pai;
  • Você só poderá criar variáveis para valores, não para seletores e nem propriedades;
  • Caso queira criar “Variáveis globais” (disponíveis para todos os elementos), utilize o seletor :root.

Veja um exemplo real:

:root {
  --largura: 50px;
  --altura: 50px;
  --fundo: black;
  --borda: 5px solid #000;
  --cor: red;
}

Agora temos várias variáveis definidas e podemos utilizá-las. Em todos os elementos do documento.

Caso queira limitar o escopo da variável, basta modificar o seletor, por exemplo:

.foo {
  --largura: 50px;
  --altura: 50px;
  --fundo: black;
  --borda: 5px solid #000;
  --cor: red;
}

Agora vamos ver como executar o valor de uma variável dentro de uma regra.

Chamando uma variável em CSS

Para chamar uma variável em CSS, utilizamos a função var(), veja um exemplo:

.foo {
  width: var(--largura);
  height: var(--altura);
  background: var(--fundo);
  border: var(--borda);
}

Você pode até utilizar funções já definidas no CSS, como calc. Veja:

.foo {
  --largura: 50px;
  --altura: 50px;
  --fundo: black;
  --borda: 5px solid #000;
  --cor: red;
}

.foo {
  width: var(--largura);
  height: var(--altura);
  background: var(--fundo);
  border: var(--borda);
}
.bar {
  width: calc( var(--largura) / 2 );
  height: var(--altura);
  background: var(--cor);
}

Estou criando os exemplos mencionados nesse artigo no CodePen, você pode testar em tempo real aqui (só funcionou no Firefox 31 ou superior).

Concluindo

Ainda é muito cedo para falar qualquer coisa sobre variáveis em CSS, mas já deu pra ter o gostinho sobre como as coisas vão funcionar.

Não se esqueça que isso é um experimento e pode ser modificado há qualquer momento, portanto, fique atento ao site da W3C.

Mais detalhes em:

Em caso de dúvidas, basta perguntar.

/por