Como utilizar variáveis no CSS

CursoPDO com PHP: Aprenda a fazer um CRUD com MySQL

Variáveis são recursos extremamente úteis na linguagem de estilização CSS, poucos conhecem e ainda menos utilizam. Hoje vamos mostrar como é muito fácil utilizar variáveis no CSS de forma nativa e sem a necessidade de nenhum plugin, framework, nem nada do tipo.

O que são variáveis?

Para entender o que é uma variável, imagine a sua casa, nela contém gavetas para guardar diferentes coisas, como talhes e meias, certo? Pois bem, essas coisas são guardadas para serem utilizadas posteriormente e também para que não se perca.

Nas linguagens de programação como Java, PHP e C#, por exemplo, as variáveis são recursos utilizados para armazenar valores, como um nome, resultado de uma consulta no banco de dados, entre vários outros tipos de informação. Esses valores ficam armazenados em variáveis para serem utilizados em diferentes lugares, evitando assim que um trecho de código seja executado várias vezes para se obter o valor e ainda sim o resultado pode ser diferente em caso de erro.

Veja na imagem abaixo com a ajuda de um Pseudo-código como uma variável funciona.

Não entendeu a imagem? Sem problemas, a gente a explica!

É declarado a variável nome recebendo o retorno da função getMyName(). Nesse momento o valor vai ficar na variável até que ela seja destruída, note que precisamos uma única vez chamar a função para pegar o nome;
Em seguida verificamos na condição if se o valor da variável não é nulo, ou seja, se tem alguma informação;
Por fim, caso tenha um valor na variável nome, então o seu valor é impresso na condição sim do if.

Como você pode ver, as variáveis são muito úteis podendo armazenar um valor que poderá ser utilizado quantas vezes forem necessárias.

CSS Variáveis

Agora que já sabemos como as variáveis funcionam e como elas facilitam as nossas vidas, vamos ver como utilizar no CSS.

Ao contrário do que muitos acreditam, as variáveis no CSS existem de formas nativas sem a necessidade do .LESS ou .SCSS, por exemplo.

É suportado por todos os navegadores modernos com isenção do Internet Explorer.

Pseudo-classe :root

Essa pseudo-classe é utilizada para referenciar os elementos pais de maior nível, como a tag <html>, por exemplo. É nessa pseudo-classe que vamos declarar as variáveis.

Note que a escrita de :root deve ser feita apenas com um único caracteres de dois pontos (:) no início, recomenda-se utilizar nas primeiras linhas do arquivo para manter uma padronização.

:root{
    /*Variáveis aqui*/
}

Declarando variável no CSS

Para declarar uma variável é muito simples, basta sempre iniciar seu nome com dois traços, utilizar o dois pontos como separador e por fim inserir seu valor, conforme mostra o exemplo abaixo.

Note que segue a mesma estrutura de propriedade e valor que usamos no dia a dia.

:root{
    --cor-azul: blue;
        --cor-vermelho: #fc0f03;
    --espaco-pequeno: 10px;
        --tamanho-fonte: 1.3em;
}

Como pode ser visto no código acima, os nomes são escritos sem nenhum carácter especial com isenção do traço. Podemos armazenar cores, tamanhos e qualquer informação que seja necessária.

Utilizando as variáveis

Assim como a sua declaração a utilização também é bem simples, para isso usa-se a função var() passando como parâmetro o nome da variável, veja o exemplo abaixo.

.titulo-principal{
    color: var(--cor-azul);
}

#div-main{
    margin-top: var(--espaco-pequeno);
}

Conclusão sobre as variáveis

Agora que você já sabe como utilizar as variáveis nunca mais declare valores em diferentes parte do arquivo de estilo, basta apenas definir a variável como valor.

Imagine que você tenha 10 ocorrências de uso da cor #39ccc5, então basta alterar o valor hexadecimal para a função var() passando o nome da variável correspondente a essa cor como parâmetro.

Gostou do conteúdo? Então segue a gente lá no instagram @satellasoft, postamos uma dica bem simples e rápida desse mesmo conteúdo por lá, confira: https://www.instagram.com/p/CNVPiRqD04Q.

Até a próxima.