Como utilizar variáveis no CSS

Gunnar CorreaGunnar Correa07/04/2021 às 11:48:10 - 334 acessos

Como utilizar variáveis no CSS

Tecnologia nativa e com suporte aos navegadores modernos pode facilitar a vida do desenvolvedor web.


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.

Como as variáveis funciona,

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

  1. É 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;
  2. Em seguida verificamos na condição if se o valor da variável não é nulo, ou seja, se tem alguma informação;
  3. 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.


css html variaveis css variaveis var css var tutorial css aula css aprenda css curso css pseudo-classe css pseudo classe root o que sao variaveis para que serve variaveis variaveis no css variaveis de cor

Compartilhe nas redes sociais



Gunnar Correa

Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web, Especialista em Tecnologias na Educação e Pós-graduando em Segurança da Informação. Começou seus estudos na área de programação quando era criança, e atualmente, está estudando desenvolvimento de jogos. É CEO do portal SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.


Fórum

Ficou com alguma dúvida? utilize nosso fórum de perguntas e respostas, lá nossa comunidade poderá te ajudar.

https://forum.satellasoft.com