Texto de: Letícia Garcez
Introdução
Variáveis são um recurso muito importante em linguagens de programação como Java, PHP e Python. As variáveis são tão importantes, que hoje em dia é praticamente impossível desenvolver uma aplicação nessas linguagens sem utilizar variáveis, mas você sabia que também é possível utilizar variáveis em folhas de estilo? Neste artigo vamos falar um pouco sobre isso.
Criando variáveis
A criação de variáveis em CSS é bem simples e costuma acontecer dentro da pseudo-classe root. Isso significa que essas variáveis estarão disponíveis para todos os outros seletores da página. Dentro do seletor dessa pseudo-classe basta definirmos o nome da variável, sendo que este deve começar com dois traços e em seguida atribuir o seu valor, como mostrado no código abaixo:
:root{
--tamanho1: 10px;
--corDeFundo: #3c2d3f;
--tamanhoTexto: 1.3rem;
}
Também podemos definir variáveis que podem ser utilizadas em shorthands, como as variáveis definidas no exemplo abaixo, onde cada variável contém um valor que será atribuido a um shorthand.
:root{
--margemPadrao: 10px 0px;
--bordaPadrao: 2px solid green;
--bordaDestaque: 5px solid red;
}
Usando variáveis
Para utilizar as variáveis CSS basta utilizar o método var() passando como parâmetro para este método o nome da variável que desejamos utilizar, como 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);
font-size: var(--tamanhoTexto);
}
.elemento1{
margin:var(--margemPadrao);
border:var(--bordaPadrao);
}
.elemento2{
border:var(--bordaDestaque);
padding: var(--tamanho1)
}
Considerações finais
Neste artigo aprendemos a criar e utilizar variáveis no CSS. Esse é um recurso muito útil e que com certeza facilitará o desenvolvimento e a manutenção das suas folhas de estilo.
