CSS

Como usar variáveis no CSS

Como usar variáveis no CSS

Fala dev, beleza? Hoje vamos aprender algo extremamente importante para melhorar sua produtividade no CSS, algo que sempre existiu nas linguagens de programação, as variáveis.

Documentos CSS também trabalha com variáveis, sabia? Se você já trabalha com CSS há algum tempo você já deve saber usar, mas para quem ainda não sabe, poderá aprender neste artigo.

Qual a vantagem de usar variáveis?

Já precisou alterar alguma cor do seu site, seja de algum botão ou algum background, e teve que alterar em todas as ocorrências da cor no documento? Mesmo usando o replace da sua IDE, ainda é mais trabalhoso que usar variáveis. 😅

A utilização de variáveis no CSS permite que você altere regras globais mais facilmente, otimizando seu código e mantendo ele muito mais organizado.

Como usar

No início do seu documento CSS, crie um pseudo-elemento :root. Ele é responsável por armazenar suas variáveis globais do seu documento.

Dentro do pseudo-elemento :root, você irá criar suas variáveis dando um nome sem acentos ou espaços, iniciando com ““, para identificá-la como uma variável.

Para usar as variáveis é bem simples, você usará a função var(–sua-variavel), dentro do parâmetro. Assim, toda vez que você usar o var() puxando uma variável, esse parâmetro vai receber os valores da variável correspondente.

Veja um exemplo na prática:

:root {
	--cor-primaria: #01e869;
	--cor-texto: #FFF;
  	--padding-btn: 10px 20px;
}
.btn {
	color: var(--cor-texto);
  	padding: var(--padding-btn);
  	background: var(--cor-primaria);
  	border-radius: 5px;
}

Eai? Gostou dessa dica? Fique ligado no blog que ou trazer mais conteúdos rápidos assim em breve! Até a próxima.

Douglas Paiani
Autor
Douglas Paiani

Gaúcho, 25 anos de idade, apaixonado por programação e suas tecnologias! Com mais de 10 anos de experiência na área de desenvolvimento web, hoje atuando como especialista em WordPress, trabalhando para várias agências de produção digital do país como FullStack. Focado em ajudar novos entusiastas a atingir o próximo nível do WordPress.

Gostou? Compartilhe!
Compartilhe com seu amigo dev:

Receba novidades em primeira
mão no seu e-mail

Suas informações estão 100% seguras