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

> Descubra o que é possível colocar em variáveis CSS. Valores aceitos, limitações de custom properties e casos de uso práticos. Aprenda agora!

URL: https://dpw.dev/css/variaveis-css-valores-possiveis/  
Publicado em: 2021-01-28  
Categoria: css  
Autor: Tárcio Zemel

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

> Artigo baseado em [What Can You Put in a CSS Variable?](https://codersblock.com/blog/what-can-you-put-in-a-css-variable/).

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](/css/variaveis-css-guia-pratico/).

## 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](https://developer.mozilla.org/en-US/docs/Web/CSS/dimension)).

```css
: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()`.

```css
: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*):

```css
: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.

```css
: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()`.

```css
: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.

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

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

Também existem identificadores personalizados (*[custom identifiers](https://developer.mozilla.org/en-US/docs/Web/CSS/custom-ident)*) que apontam para coisas que você definiu e nomeou, como um `animation-name` ou `grid-area`:

```css
: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()`.

```css
: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](https://codepen.io/lonekorean/pen/GRjZwEM) by Will Boyd ([@lonekorean](https://codepen.io/lonekorean))
  on [CodePen](https://codepen.io).

## 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`.

```css
: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`:

```css
: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.

```css
: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!

```css
/*
  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](https://codepen.io/lonekorean/pen/gOwrQRX) by Will Boyd ([@lonekorean](https://codepen.io/lonekorean))
  on [CodePen](https://codepen.io).

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

```css
@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()`:

```css
: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](https://drafts.css-houdini.org/css-properties-values-api/). Faz parte do [Houdini](https://ishoudinireadyyet.com/) 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:

```css
@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:

```css
@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`.

```css
.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](https://codepen.io/lonekorean/pen/PoGNxjE) by Will Boyd ([@lonekorean](https://codepen.io/lonekorean))
  on [CodePen](https://codepen.io).

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:

```css
.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](https://developer.mozilla.org/en-US/docs/Web/CSS/string), mas isso não funcionará com variáveis ​​de [inteiros](https://developer.mozilla.org/en-US/docs/Web/CSS/integer). No entanto, [contadores CSS](https://codersblock.com/blog/fun-times-with-css-counters/) funcionam com valores inteiros e podem ser exibidos [como uma string](https://developer.mozilla.org/en-US/docs/Web/CSS/counter()) com `content`.

```css
.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](https://www.w3.org/TR/css-variables-1/#syntax)". 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.

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml