O que é possível colocar em uma variável CSS?

O poder que as Variáveis CSS trouxeram às folhas de estilo é surpreendente, mas você sabe o que é possível colocar em uma variável CSS?

Ir para o artigo

Variáveis ​​CSS (também conhecidas como CSS Custom Properties) podem conter todos os tipos de “coisas”. Algumas dessas coisas podem não ser tão óbvias, então, veja o que é possível colocar em uma variável CSS.

Para deixar claro, este artigo é focado em o que é possível usar como valor de variáveis CSS. Se você está procurando informações como o que são Variáveis CSS, suas vantagens, exemplos, formas de uso, macetes e interações com outras tecnologias, confira nosso Guia Prática de Variáveis CSS.

Valores unitários (e um pouco de matemática)

É comum colocar valores numéricos com unidades em uma variável CSS. Eles são formalmente conhecidos como dimensões (dimensions).

Variáveis CSS ​​podem conter os resultados de cálculos envolvendo outras variáveis ​​via calc().

Da igual maneira, as variáveis ​​podem ser usadas com funções CSS integradas (built-in CSS functions):

Valores numéricos sem unidade

As variáveis CSS ​​também podem conter valores numéricos sem unidade (unitless numerical values). Algumas propriedades CSS usam esses valores diretamente.

Em determinadas situações, talvez seja preciso aplicar unidades a esses valores, o que pode ser feito com a multiplicação em uma expressão calc().

Não-numéricos

Variáveis ​​CSS não são apenas para números. Elas podem conter palavras-chave predefinidas que as propriedades reconhecem.

Também existem identificadores personalizados (custom identifiers) que apontam para coisas que você definiu e nomeou, como um animation-name ou grid-area:

Content Strings

Os pseudo-elementos ::before e ::after usam a propriedade content para exibir… O conteúdo. Este conteúdo pode ser algumas coisas diferentes, mas, geralmente, são strings de texto.

O CSS a seguir mostra content sendo preenchida com variáveis ​​de string. Também é possível observar como concatenar variáveis ​​de string com outras strings e como extrair um valor de string de um atributo com attr().

Aqui um demos que mostrar o resultado:

See the Pen CSS Variables with Content Strings by Will Boyd (@lonekorean) on CodePen.

Imagens

Variáveis ​​CSS também podem conter imagens. Imagens também podem ser exibidas em content, mas é muito mais comum vê-las sendo usadas em background-image.

Isso permite esconder URLs longos e pesados de imagens ​​e apenas use nomes de variáveis ​​mais curtos quando necessário — percebe que isso ajuda a diminuir bastante o peso do arquivo CSS?

Shorthands

Uma variável CSS pode ser usada como um único valor em uma shorthand ou como uma shorthand inteira, em si. Os 2 elementos do contêiner abaixo terão o mesmo padding:

O interessante é que as variáveis ​​CSS também podem conter um segmento parcial de uma shorthand que contém valores múltiplos.

Listas

Algumas propriedades, como background e box-shadow, podem ter uma lista de valores. É possível usar uma variável CSS como um único item na lista, uma sublista da lista ou a lista inteira.

Seguem alguns exemplos de como misturar box-shadow e variáveis ​​CSS. Também, inclui um exemplo de como colocar uma lista de cores em uma variável CSS para usar em um linear-gradient() — sim, também é possível fazer isso!

Veja o resultado final:

See the Pen CSS Variables with Shadow Lists by Will Boyd (@lonekorean) on CodePen.

Cores em variáveis CSS

Imagem de várias tigelas vazias, simbolizando variáveis CSS e que tipo de valor uma variável CSS pode receber.

Não se esqueça das cores! Variáveis ​​CSS funcionam muito bem para cores e é muito comum vê-las usadas para definir um tema de cores que seja fácil de usar em um site.

Também é possível colocar valores de parâmetro de cor separados em variáveis ​​CSS e combiná-los em uma cor usando rgb()/rgba() ou hsl()/hsla(). Aqui um exemplo usando rgb():

Juntando tudo com Animação CSS

É possível colocar um valor animado em uma variável CSS? A resposta: é complicado…

Por padrão, geralmente, não. Alguns navegadores mostrarão um único jump discreto do valor inicial para o valor final; alguns navegadores não farão nada. De qualquer forma, não será possível obter nenhum tipo de animação interpolada suave — pelo menos, na data de publicação deste artigo.

O problema é que os navegadores não sabem como animar suas variáveis ​​inventadas. Mas há boas notícias: pode-se resolver isso graças à Properties and Values API. Faz parte do Houdini e, atualmente, funciona no Chrome, Edge e Opera (com a expectativa de, em breve, funcionar em outros).

É assim que funciona. Primeiro, declare suas propriedades personalizadas:

O código diz ao seu navegador “Ei, aqui estão algumas variáveis, elas são inteiros com o padrão de 0”. Então, o navegador pode dizer “Oh! Inteiros! Eu sei como animá-los”.

Agora, tudo está pronto para a animação:

No CSS acima, há uma animação de keyframe para cada variável indo de 0 (o initial-value declarado) a 255. Esses valores são animados no elemento :root e todos os elementos-filho podem usá-los, já que as variáveis foram declaradas com inherits: true.

E, com isso, obtém-se 3 variáveis ​​CSS animadas de forma independente que são combinadas via rgb() para criar background-color em constante mudança. Sem JavaScript!

See the Pen CSS Variables Color Animation by Will Boyd (@lonekorean) on CodePen.

Na verdade, há muita coisa acontecendo nessa demonstração. Várias animações estão sendo alimentadas por esse trio de variáveis ​​CSS animadas (--red, --green, --blue). Vamos decompô-la.

Primeiro, a grande amostra de cor RGB. Isso acabou de ser abordado.

Segundo, os indicadores se movem para cima e para baixo nas barras coloridas. Eles são posicionados convertendo as variáveis ​​CSS em valores px negativos. Por exemplo, aqui está o vermelho:

Terceiro, os números exibidos sob as barras coloridas. Conforme mencionado, é possível usar content para exibir strings, mas isso não funcionará com variáveis ​​de inteiros. No entanto, contadores CSS funcionam com valores inteiros e podem ser exibidos como uma string com content.

Basicamente, a técnica abusa de contadores CSS para converter um número inteiro em uma string. Tempos divertidos. :)

Conclusão

Do ponto de vista da sintaxe, variáveis ​​CSS são “extremamente permissivas“. Definitivamente, há mais tipos de valores possíveis para serem usados com as variáveis que não foram abordados no artigo; de qualquer maneira, espera-se que o que foi mostrado tenha sido o suficiente para passar uma perspectiva das possibilidades.

E-book que explica os 3 conceitos fundamentais de CSS para você entender de uma vez por todas e parar de brigar com CSS!

Usamos cookies para melhorar sua experiência e para ajudar a entender como nosso site é usado. Ao utilizar este site, você aceita o uso de cookies. Consulte nossa política de privacidade para obter mais informações.