Usando variáveis no CSS

INTRODUÇÃO

Pensando nos sites que estamos acostumados a usar, eles são bem coloridos, não é? Normalmente as cores fazem referência a itens específicos, é muito mais legal ver sites coloridos e já até nos acostumamos com certos itens que nem precisamos mais ler o que está escrito e somos guiados pelas cores.

Lembram do post que fiz sobre Como estilizar Checkbox com CSS? Para quem não viu, vale muito entrar no link e dar uma olhadinha… Gostei tanto daquele exemplo que vou usá-lo novamente para a gente aprender mais uma coisa legal de usar no CSS.

Figura 01 – Layout monocromático

O layout está legal com o checkbox estilizado, do jeitinho que queríamos. Porém está tudo da mesma cor, não fica legal assim. Seria bem melhor se cada item tivesse a sua cor, sua identidade, não acham? Assim quando fossemos fazer referência às informações de Frontend, por exemplo, a cor seria sempre a mesma, muito mais fácil para identificar pelas cores. Mas como podemos fazer isso no CSS não somente usando a propriedade color ou outra qualquer que coloque cor nos elementos?

Essa é a ideia deste post, dar cor para esses itens aprendendo coisas novas para implementar no CSS que podem nos ajudar muito na manutenção futura do código.

ADICIONANDO COR AOS ITENS

Já vimos como está o layout final do nosso projeto anterior, então, vamos recordar rapidamente como está o código do HTML, para assim, ficar mais fácil na hora de fazer referência no CSS.

Figura 02 – HTML do projeto anterior

Vamos estipular uma cor para cada item, assim em todos os lugares do site que o mesmo item aparecer, terá que aparecer com a cor que escolhemos para ele. Assim estamos dando identidade para cada item.

Figura 03 – Cores dos itens

Agora que as cores foram escolhidas, podemos adicioná-las no CSS que já fizemos no projeto anterior. Vamos colocar as cores escolhidas na descrição (label), no quadrado menor (label::after), no quadrado maior (label::before) e no fundo do quadrado menor quando o item é selecionado (input:checked). Para relembrar os detalhes do código onde criamos esses itens, deem uma olhada no código completo no post Como estilizar Checkbox com CSS.

Figura 04 – Implementando cores

Com o CSS de cores implementado, vamos olhar como ficou o resultado no navegador.

Figura 05 – Layout colorido

Pronto! Colocamos cor nos nossos elementos. Mas peraí… Essas propriedades de cores a gente já estava usando no código anterior, mas com a cor cinza, não fizemos nada de novo. O que era para a gente aprender mesmo?

Imagina manter esse esquema de cores em um código de grande porte com várias páginas, vários arquivos CSS e muito mais itens do que só 4, onde teríamos a necessidade de reutilizar essas cores em inúmeras posições nos vários arquivos. Seria chato ficar reescrevendo os códigos de cores em todos os momentos que eles fossem necessários, tirando a possibilidade de erro nesses “Ctrl+C” e “Ctrl+V” de cores para lá e para cá.

Outra coisa, imaginem se fosse necessário alterar o esquema de cores. Seria uma tarefa complexa, pois nem sempre um simples “Buscar e Substituir” seria o suficiente, e também poderia causar vários erros.

Como poderíamos fazer para que esse esquema de cores se tornasse um padrão para seguir em todas as outras páginas?

Hummm!!! Em outras linguagens podemos criar variáveis com um valor fixo e depois chamá-la sempre que ela for necessária. Será que é possível seguir o mesmo conceito no CSS?

VARIÁVEIS NO CSS

Atualmente, já conseguimos criar variáveis no CSS, pode parecer estranho, mas é possível e muito útil. Podemos criar variáveis com cores, números, medidas específicas e sempre que precisarmos, podemos usá-las como valor em qualquer propriedade do CSS.

Para declarar uma variável utilizamos as chamadas Custom Properties, que por definição é qualquer propriedade que inicie com dois hifens. A sintaxe para se criar uma variável CSS tem o formato –*, onde o sinal asterisco (*) é o nome da variável, e no qual alguns caracteres não são permitidos, como por exemplo: ; # } ] ) entre outros.

Figura 06 – Sintaxe para criar variáveis

Parece confuso, não é?

Mas calma, vamos fazer com o nosso exemplo para que fique mais claro como declarar as variáveis com as cores já escolhidas anteriormente.

Figura 07 – Criando as variáveis

Criamos nossas variáveis, mas elas estão soltas no CSS, sem seletor nenhum, não podemos deixar assim, então em qual seletor podemos colocar essas variáveis para que possamos utilizá-las em todos os arquivos necessários?

Para que uma variável funcione e seja acessível em todos os níveis do CSS, utilizamos o seletor :root. Trata-se de uma pseudo-classe que representa o “escopo global” do projeto, que nada mais é do que a raiz do documento.

Figura 08 – Variáveis no seletor :root

Pronto! Conseguimos criar as variáveis e já estão disponíveis para usarmos em todas as páginas que quisermos. Então, como fazemos para chamar a variável nas propriedades?

Podemos chamar uma variável como valor de qualquer propriedade CSS utilizando a notação var(), passando a variável já declarada como parâmetro, assim ela irá retornar o valor da variável.

Figura 09 – Sintaxe para chamar variáveis

Agora que sabemos como utilizar as variáveis declaradas nas propriedades, podemos colocá-las no nosso código de CSS.

Figura 10 – Variáveis sendo utilizadas

Ae! Conseguimos criar as variáveis e estamos usando nas mesmas propriedades de cores que utilizamos antes para colocar cores diretamente. Com isso, vamos olhar como ficou o layout no navegador.

Figura 11 – Layout final colorido

Com a criação de variáveis, se for necessário trocar a cor de qualquer um dos itens, é só alterar em um único lugar e todos os arquivos CSS que estiverem utilizando essa variável, já vão entender que a cor mudou e o site vai ficar lindão com a cor nova, somente com uma alteração rápida.

OUTRAS UTILIDADES DAS VARIÁVEIS

Usar variáveis não é somente para cores, podemos usar com números ou medidas específicas, e assim podemos até usar com o método calc(), ou em funções no JavaScript.

Podemos também associar variáveis ao content do pseudo-elemento, mas aqui vale ressaltar que para funcionar, a variável tem que ser declarada como uma string.

Vale observar que para alguns navegadores, como o Internet Explorer, esse método ainda não funciona, melhor verificar a disponibilidade do método no CANIUSE quando forem utilizá-la, dependendo do navegador onde querem que funcione.

Para quem quiser ver o código completo com a criação do checkbox estilizado e já colorido, podem acessar esse link no CodePen.

CONCLUSÃO

Nem preciso dizer que a grande vantagem de se criar variáveis no CSS é não ter mais que declarar diversos valores repetidos no meio do código, e assim facilitar o desafio da manutenção do código.

Vale lembrar que a criação de variáveis nos pré-processadores de CSS já era possível, e muitos utilizam esses pré-processadores para facilitar na montagem do CSS. E isso continua válido, mas a ideia aqui é se aventurar no CSS puro, sem frameworks ou pré-processadores que facilitem a utilização.

Espero que tenham gostado e que comecem a utilizar mais a criação de variáveis em seus arquivos, e prometo que no próximo post, vou tentar usar outro exemplo para aprender coisas novas e não mais os quadradinhos bonitinhos! rs…

Link para os posts anteriores, dos quadradinhos bonitinhos…
Como estilizar Checkbox com CSS
Aprenda a deixar o Checkbox estilizado acessível a pessoas com deficiência visual

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *