Categorias
Projetos

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

8min para ler
CSS
O que é possível colocar em uma variável CSS?

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);
}

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);
}

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);
}

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);
}

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));
}

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);
}

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);
}

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);
}

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);
}

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);
}

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;
}

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));
}

Veja o resultado final:

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

Cores em variáveis CSS

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);
}

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));
}

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;
}

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;
}

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));
}

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));
}

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);
}

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.