Como Usar Variáveis CSS

Oi! Hoje nós iremos analisar as variáveis CSS. Esse post vai ser dividido em duas seções. Uma sobre como criar variáveis CSS e outra para explicar como utilizá-las.

Eu também tenho um exemplo no CodePen ridiculamente exagerado com o qual você pode jogar no fim desta página. Deve ser bastante fácil de modificar, porque eu tentei rotular e comentar tudo de forma clara.

Variáveis CSS

Variáveis são agora nativos do CSS e não exclusivos dos pré-processadores. Variáveis são um recurso muito popular em pré-processadores como o SASS. Mais suporte em navegadores (menos edge e internet explore), significa que as variáveis podem ser facilmente usadas em seu próprio código.

Como Declarar Variáveis CSS

As variáveis CSS são melhor definidas na pseudo classe :root na parte superior da sua folha de estilos. :root se refere ao pai de nível mais alto em sua estrutura DOM, geralmente a tag HTML. Ele é um tipo de seletor universal.

Isso mantém seu código organizado e previne que precise declarar variáveis mais de uma vez. Abaixo um rápido exemplo de como criar variáveis CSS.

A pseudo classe :root age como seu seletor. Sua variável começa precedida por dois traços e um nome seguido do valor. Você pode referenciar essa variável em qualquer caso aplicável. Aqui um exemplo:

Nesse caso, nós mudamos todas as cores de fundo do parágrafo para manter o valor de --primary-color , que nós anteriormente definimos como red (vermelho) dentro da pseudo classe :root.

Como Usar Corretamente Variáveis CSS

Usando variáveis podemos criar problemas complexos dentro do código. Por exemplo, veja a declaração da variável abaixo:

Se você deseja mudar de red (vermelho) para blue (azul),
você teria uma variável mal mencionada em sua folha de estilo,
ou você teria que mudar a variável de cada instância individual.

Estas são questões que você aparentemente precisa evitar. Elas diferem do propósito de usar variáveis ​​para fácil edição e velocidade.

A maneira correta de codificar uma variável CSS seria em dois passos como descrito abaixo:

Criar suas variáveis com este sistema de 2 passos permite uma edição fácil e eficiente. Se você quiser um tom diferente de vermelho em sua folha de estilo você poderá simplesmente mudar na variável --red:. Caso contrário, você precisará alterar todos os valores em sua folha de estilo manualmente.

Você também pode alterar sua cor primária no nível de variável. Se você quiser azul como sua cor primária, você terá uma edição de dois passos para isso.

Simplesmente definirá uma variável de cor azul, depois adicione isso como seu valor de cor primária. Aqui está uma representação visual que se baseia no exemplo anterior.

Casos de Uso Praticáveis

Existem muitas utilizações praticáveis (e impraticáveis) para variáveis CSS. Eu descreverei os que eu acredito ser praticáveis abaixo.

Cores & Guias de Estilo

Com variáveis, você pode criar e editar facilmente seus guias de estilo. Esse é o melhor jeito. Aqui um exemplo de guia de estilo praticável usando as cores em nosso site como um guia.

Esse processo permite mudanças rápidas e fáceis a longo prazo. Você poderá fazer pequenas alterações de cores sem ter que dar uma volta e editar todo o seu CSS.

Ele também permite que você marque semanticamente seu CSS sem qualquer tipo de confusão mais tarde. Indo direto ao ponto.

Margins & Padding

Você poderá facilmente definir margens e preenchimentos padrões para os elementos com variáveis. Abaixo um exemplo rápido:

Heights & Widths

Esse é interessante porque você poderá usar CSS calc() para fazer alguns cálculos relacionais. Aqui é um exemplo rápido antes de explicar:

Você pode definir o tamanho dos elementos pai, então certifique-se que os filhos são calculadas contra os pais. Funciona muito bem, especialmente quando se faz itens responsivos.

Outros Estilos Variados

Estilo de fonte, box-shadow, animações, etc são todos tipos de atributos que as variáveis funcionam. Você pode usar essas variáveis ​​da maneira que quiser.

Apenas tenha certeza que eles são rotulados de forma semântica e bem pensados. Pode ficar confuso para usar muitas variáveis. Você pode verificar isso no exemplo abaixo.

Nota: Você pode editar a demo a seguir.

Autor: ZingChart.
Original: “How to use CSS Variables”.