Assim como em javascript ou em outra linguagem de programação, no CSS podemos usar variáveis para que sejam reutilizadas em várias partes da nossa folha de estilo.
Sendo assim, se tivermos vários elementos com o mesmo tom de cor, podemos mudar essa cor em um único local e usar a variável em diversos elementos para inserir esta cor.
Como criar uma variável no css.
Aqui está a sintaxe básica para definir uma variável CSS.
–nome-da-variavel-css : propriedade e valor;
É uma boa prática definir todas as suas variáveis no topo da sua folho de estilo. Para projetos maiores você pode criar um arquivo separado apenas para suas variáveis para que você possa reutilizar em outras folhas de estilo.
Para acessar a variável criada, use a função var(). Segue a sintaxe.
propriedade css: var(–nome-da-variavel-css);
Vamos agora a um exemplo real, onde teremos uma cor principal do nosso tema e outra cor padrão para os textos. Vou nomear essas variáveis da seguinte maneira:
–main-bg-color: #000080;
–main-text-color: #fff;
Agora vamos colocar essas variáveis dentro do pseudo seletor :root que representa o elemento raiz no meu documento HTML.
:root {
–main-bg-color: #000080;
–main-text-color: #fff;
}
Agora no meu seletor body eu vou referenciar essas variáveis usando a função var().
body {
background-color: var(–main-br-color);
color: var(–main-text-color).
}
Aqui está o exemplo no codepen:
See the Pen Variavel no CSS by Leonardo-Ferreira-costa (@leonardo-ferreira-costa) on CodePen.
https://codepen.io/leonardo-ferreira-costa/full/ZEqerEP
Edite o codepen acima na variável –main-bg-color e veja a alteração acontecendo em todos os elementos de uma única vez.
Espero que tenha gostado e devo voltar neste tema com mais informações.
Obrigado até a próxima.
