Primeiramente, você sabe a importância do uso de variáveis em seus códigos? Se não, precisamos mudar isso, pois todas as pessoas programadoras deveriam saber.
As variáveis podem nos ajudar a deixar o código muito mais limpo e parametrizado, assim como nos ajuda em sua manutenção.
Em linguagens de programação como Java, PHP e Python, é praticamente impossível desenvolver uma aplicação sem utilizar variáveis, mas você sabia que também é possível utilizá-las em folhas de estilo?
Então vem comigo que neste artigo nós vamos falar um pouco sobre como utilizar e criá-las. Vem conferir!
Criando variáveis
Sua criação é bem simples e se dá dentro da pseudo-classe root. Dentro do seletor dessa pseudo-classe basta definirmos o nome da variável – não se esqueça que este deve começar com dois traços – e o seu valor.
Um exemplo pode ser visto no código abaixo:
:root{
--tamanho1: 10px;
--corDeFundo: #3c2d3f;
--tamanhoTexto: 1.3rem;
}
Uma coisa importante de lembrarmos sobre as variáveis é que elas devem ser usadas como valor de alguma propriedade CSS, como por exemplo, color, background-color, font-size, width, etc.
E nós também podemos ter variáveis que podem ser utilizadas posteriormente em shorthands como no exemplo abaixo:
:root{
--margemPadrao: 10px 0px;
--bordaPadrao: 2px solid green;
--bordaDestaque: 5px solid red;
}
Usando variáveis CSS
Em seguida vamos para utilização. Para isso, basta utilizar o método var() passando como parâmetro para este método o nome da variável que desejamos utilizar.
Olha como funciona no exemplo abaixo:
:root{
--tamanho1: 10px;
--corDeFundo: #3c2d3f;
--tamanhoTexto: 1.3rem;
--margemPadrao: 10px 0px;
--bordaPadrao: 2px solid green;
--bordaDestaque: 5px solid red;
}
body{
background-color: var(--corDeFundo);
}
.elemento1{
margin:var(--margemPadrao);
border:var(--bordaPadrao);
}
.elemento2{
border:var(--bordaDestaque);
padding: var(--tamanho1)
}
Viu como é fácil? Então por hoje é isso, pessoal. Se você quiser conferir um pouco mais sobre CSS, é só clicar nos links abaixo. Até a próxima!
