Variáveis no CSS

1a atrás

As CSS variables, também conhecidas como custom properties, são recursos poderosos do CSS que permitem definir e reutilizar valores em propriedades de estilo. Elas começam com o prefixo "--" seguido de um nome personalizado. Uma vez definidas, podem ser utilizadas em qualquer parte do documento através da função var().

Exemplo

No exemplo abaixo, vamos definir uma variável #CSS para o background de um botão:

:root {
  --bg-color: lightblue;
}

button {
  background-color: var(--bg-color);
}

No exemplo, definimos uma variável no seletor :root, tornando ela global e acessível em todo o documento. Em seguida, utilizamos essa variável no seletor button. Isso permite fácil personalização e manutenção, pois, ao alterar o valor das variáveis no :root, todas as referências todas as referências serão atualizadas automaticamente.

As CSS variables são especialmente úteis para temas dinâmicos, onde é possível mudar as cores e outras propriedades com apenas algumas mudanças nas variáveis, proporcionando uma experiência de desenvolvimento mais modular e flexível.

Você pode, por exemplo, criar um esquema de cores para botões:

:root {
  --primary-bg-color: lightblue;
  --danger-bg-color: red;
  --success-bg-color: green;
}

button[color='primary'] {
  background-color: var(--primary-bg-color);
}

button[color='danger'] {
  background-color: var(--danger-bg-color);
}

button[color='success'] {
  background-color: var(--success-bg-color);
}

No #HTML ficaria assim:

<button color="primary">PRIMARY</button>
<button color="danger">DANGER</button>
<button color="success">SUCCESS</button>

Exemplo

Comentários (0)