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).

:root {
  --nice-padding: 20px;
  --decent-font-size: 1.25rem;
}

article {
  padding: var(--nice-padding);
  font-size: var(--decent-font-size);
}

:root {

--nice-padding: 20px;

--decent-font-size: 1.25rem;

}

article {

padding: var(--nice-padding);

font-size: var(--decent-font-size);

}

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

:root {
  --image-width: 800px;

  /* calcula a altura para preservar a proporção 4:3 */
  --image-height: calc(var(--image-width) / (4/3));
}

img {
  width: var(--image-width);
  height: var(--image-height);
}

:root {

--image-width: 800px;

/* calcula a altura para preservar a proporção 4:3 */

--image-height: calc(var(--image-width) / (4/3));

}

img {

width: var(--image-width);

height: var(--image-height);

}

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

:root {
  --min: 1rem;
  --max: 4rem;
  --clamped-font-size: clamp(var(--min), 2.5vw, var(--max));
}

p {
  font-size: var(--clamped-font-size);
}

:root {

--min: 1rem;

--max: 4rem;

--clamped-font-size: clamp(var(--min), 2.5vw, var(--max));

}

p {

font-size: var(--clamped-font-size);

}

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.

:root {
  --obnoxiously-big-number: 9001;
}

.important-modal {
  z-index: var(--obnoxiously-big-number);
}

:root {

--obnoxiously-big-number: 9001;

}

.important-modal {

z-index: var(--obnoxiously-big-number);

}

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().

:root {
  --magic-number: 41;
}

.crazy-box {
  width: calc(var(--magic-number) * 1%);
  padding: calc(var(--magic-number) * 1px);
  transform: rotate(calc(var(--magic-number) * 1deg));
}

:root {

--magic-number: 41;

}

.crazy-box {

width: calc(var(--magic-number) * 1%);

padding: calc(var(--magic-number) * 1px);

transform: rotate(calc(var(--magic-number) * 1deg));

}

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.

:root {
  --bullets: circle;
  --casing: uppercase;
}

ul {
  list-style-type: var(--bullets);
  text-transform: var(--casing);
}

:root {

--bullets: circle;

--casing: uppercase;

}

ul {

list-style-type: var(--bullets);

text-transform: var(--casing);

}

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

:root {
  --layout-position: center-stage;
}

body {
  grid-template-areas: 'left center-stage right';
}

main {
  grid-area: var(--layout-position);
}

:root {

--layout-position: center-stage;

}

body {

grid-template-areas: 'left center-stage right';

}

main {

grid-area: var(--layout-position);

}

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().

:root {
  --open: '(';
  --close: ')';
  --heading-hint: ' ' var(--open) 'this is a heading' var(--close);
  --link-hint: ' ' var(--open) attr(href) var(--close);
}

h1::after {
  content: var(--heading-hint);
}

a::after {
  content: var(--link-hint);
}

:root {

--open: '(';

--close: ')';

--heading-hint: ' ' var(--open) 'this is a heading' var(--close);

--link-hint: ' ' var(--open) attr(href) var(--close);

}

h1::after {

content: var(--heading-hint);

}

a::after {

content: var(--link-hint);

}

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.

:root {
  /* imagem de URL externo */
  --image-from-somewhere: url(https://codersblock.com/assets/images/logo.png);

  /* imagem via embedded data */
  --image-embedded: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M8 256c0 136.966 111.033 248 248 248s248-111.034 248-248S392.966 8 256 8 8 119.033 8 256zm248 184V72c101.705 0 184 82.311 184 184 0 101.705-82.311 184-184 184z'%3E%3C/path%3E%3C/svg%3E");
}

.a {
  background-image: var(--image-from-somewhere);
}

.b::after {
  content: var(--image-embedded);
}

:root {

/* imagem de URL externo */

--image-from-somewhere: url(https://codersblock.com/assets/images/logo.png);

/* imagem via embedded data */

--image-embedded: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M8 256c0 136.966 111.033 248 248 248s248-111.034 248-248S392.966 8 256 8 8 119.033 8 256zm248 184V72c101.705 0 184 82.311 184 184 0 101.705-82.311 184-184 184z'%3E%3C/path%3E%3C/svg%3E");

}

.a {

background-image: var(--image-from-somewhere);

}

.b::after {

content: var(--image-embedded);

}

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:

:root {
  --top-padding: 60px;
  --all-padding: 60px 20px 40px 10px;
}

.container {
  padding: var(--top-padding) 20px 40px 10px;
}

.another-container {
  padding: var(--all-padding);
}

:root {

--top-padding: 60px;

--all-padding: 60px 20px 40px 10px;

}

.container {

padding: var(--top-padding) 20px 40px 10px;

}

.another-container {

padding: var(--all-padding);

}

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

:root {
  --weight-and-size: bold 3rem;
}

body {
  font: var(--weight-and-size)/1.25 sans-serif;
}

:root {

--weight-and-size: bold 3rem;

}

body {

font: var(--weight-and-size)/1.25 sans-serif;

}

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!

/*
  lembrete rápido sobre a anatomia de box-shadow:
  box-shadow: <x-offset> <y-offset> <blur> <spread> <color>;
*/

:root {
  --single-shadow:
 0 0 0 40px #355c7d;
  --multi-shadow:
 0 0 0 60px #f67280,
 0 0 0 80px #6c5b7b;
  --gradient-colors: #f1bbba, #ece5ce, #c5e0dc;
}

.a {
  box-shadow:
    0 0 0 20px #60b99a,
    var(--single-shadow);
}

.b {
  box-shadow:
    var(--multi-shadow);
}

.c {
  box-shadow:
    0 0 0 20px #60b99a,
    var(--single-shadow),
    var(--multi-shadow);
}

body {
  background-image: linear-gradient(45deg, var(--gradient-colors));
}

lembrete rápido sobre a anatomia de box-shadow:

box-shadow: <x-offset> <y-offset> <blur> <spread> <color>;

:root {

--single-shadow:

0 0 0 40px #355c7d;

--multi-shadow:

0 0 0 60px #f67280,

0 0 0 80px #6c5b7b;

--gradient-colors: #f1bbba, #ece5ce, #c5e0dc;

}

.a {

box-shadow:

0 0 0 20px #60b99a,

var(--single-shadow);

}

.b {

box-shadow:

var(--multi-shadow);

}

.c {

box-shadow:

0 0 0 20px #60b99a,

var(--single-shadow),

var(--multi-shadow);

}

body {

background-image: linear-gradient(45deg, var(--gradient-colors));

}

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.

@media (prefers-color-scheme: light) {
  :root {
    --color-text: #233742;
    --color-links: #d80b77;
    --color-bg: white;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-text: white;
    --color-links: #b4cddd;
    --color-bg: #233742;
  }
}

body {
  color: var(--color-text);
  background-color: var(--color-bg);
}

a {
  color: var(--color-links);
}

@media (prefers-color-scheme: light) {

:root {

--color-text: #233742;

--color-links: #d80b77;

--color-bg: white;

}

@media (prefers-color-scheme: dark) {

:root {

--color-text: white;

--color-links: #b4cddd;

--color-bg: #233742;

}

body {

color: var(--color-text);

background-color: var(--color-bg);

}

a {

color: var(--color-links);

}

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():

:root {
  --red: 216;
  --green: 11;
  --blue: 119;
}

a {
  color: rgb(var(--red), var(--green), var(--blue));
}

:root {

--red: 216;

--green: 11;

--blue: 119;

}

a {

color: rgb(var(--red), var(--green), var(--blue));

}

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:

@property --red {
  syntax: '<integer>';
  inherits: true;
  initial-value: 0;
}

@property --green {
  syntax: '<integer>';
  inherits: true;
  initial-value: 0;
}

@property --blue {
  syntax: '<integer>';
  inherits: true;
  initial-value: 0;
}

@property --red {

syntax: '<integer>';

inherits: true;

initial-value: 0;

}

@property --green {

syntax: '<integer>';

inherits: true;

initial-value: 0;

}

@property --blue {

syntax: '<integer>';

inherits: true;

initial-value: 0;

}

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:

@keyframes red-fade {
  50% { --red: 255; }
}

@keyframes green-fade {
  50% { --green: 255; }
}

@keyframes blue-fade {
  50% { --blue: 255; }
}

:root {
  animation: red-fade 16s, green-fade 14s, blue-fade 12s;
  animation-iteration-count: infinite;
}

@keyframes red-fade {

50% { --red: 255; }

}

@keyframes green-fade {

50% { --green: 255; }

}

@keyframes blue-fade {

50% { --blue: 255; }

}

:root {

animation: red-fade 16s, green-fade 14s, blue-fade 12s;

animation-iteration-count: infinite;

}

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.

.swatch {
  background-color: rgb(var(--red), var(--green), var(--blue));
}

.swatch {

background-color: rgb(var(--red), var(--green), var(--blue));

}

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:

.red .indicator {
  transform: translateY(calc(var(--red) * -1px));
}

.red .indicator {

transform: translateY(calc(var(--red) * -1px));

}

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.

.red .value::before {
  /* entra variável inteiro */
  counter-reset: color-value var(--red); 

  /* sai um valor de contador string-like */
  content: counter(color-value);
}

.red .value::before {

/* entra variável inteiro */

counter-reset: color-value var(--red);

/* sai um valor de contador string-like */

content: counter(color-value);

}

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.