{"id":59,"date":"2023-04-24T17:41:32","date_gmt":"2023-04-24T20:41:32","guid":{"rendered":"https:\/\/difusao.tech\/blog\/?p=59"},"modified":"2023-08-23T13:53:35","modified_gmt":"2023-08-23T16:53:35","slug":"o-que-sao-variaveis-no-css-e-como-usa-las","status":"publish","type":"post","link":"https:\/\/difusao.tech\/blog\/o-que-sao-variaveis-no-css-e-como-usa-las\/","title":{"rendered":"O que s\u00e3o vari\u00e1veis no CSS e como us\u00e1-las?"},"content":{"rendered":"
\n
\"\"<\/figure>\n<\/div>\n\n\n

Assim como em javascript ou em outra linguagem de programa\u00e7\u00e3o, no CSS podemos usar vari\u00e1veis para que sejam reutilizadas em v\u00e1rias partes da nossa folha de estilo.<\/p>\n\n\n\n

Sendo assim, se tivermos v\u00e1rios elementos com o mesmo tom de cor, podemos mudar essa cor em um \u00fanico local e usar a vari\u00e1vel em diversos elementos para inserir esta cor.<\/p>\n\n\n\n

Como criar uma vari\u00e1vel no css.<\/h2>\n\n\n\n

Aqui est\u00e1 a sintaxe b\u00e1sica para definir uma vari\u00e1vel CSS.<\/p>\n\n\n\n

–nome-da-variavel-css<\/mark> : propriedade e valor;<\/mark><\/p>\n\n\n\n

\u00c9 uma boa pr\u00e1tica definir todas as suas vari\u00e1veis no topo da sua folho de estilo. Para projetos maiores voc\u00ea pode criar um arquivo separado apenas para suas vari\u00e1veis para que voc\u00ea possa reutilizar em outras folhas de estilo.<\/p>\n\n\n\n

Para acessar a vari\u00e1vel criada, use a fun\u00e7\u00e3o var(). Segue a sintaxe.<\/p>\n\n\n\n

propriedade css<\/mark>: var<\/mark>(–nome-da-variavel-css<\/mark>);
<\/p>\n\n\n\n

Vamos agora a um exemplo real, onde teremos uma cor principal do nosso tema e outra cor padr\u00e3o para os textos. Vou nomear essas vari\u00e1veis da seguinte maneira:<\/p>\n\n\n\n

–main-bg-color<\/mark>: #000080<\/mark>;<\/p>\n\n\n\n

–main-text-color<\/mark>: #fff<\/mark>;<\/p>\n\n\n\n

Agora vamos colocar essas vari\u00e1veis dentro do pseudo seletor :root<\/mark> que representa o elemento raiz no meu documento HTML.<\/p>\n\n\n\n

:root {
–main-bg-color<\/mark>: #000080<\/mark>;
–main-text-color<\/mark>: #fff<\/mark>;
}<\/p>\n\n\n\n

Agora no meu seletor body<\/mark> eu vou referenciar essas vari\u00e1veis usando a fun\u00e7\u00e3o var()<\/mark>.<\/p>\n\n\n\n

body <\/mark>{
background-color<\/mark>: var<\/mark>(–main-br-color<\/mark>);
color<\/mark>: var<\/mark>(–main-text-color<\/mark>).
}<\/p>\n\n\n\n

Aqui est\u00e1 o exemplo no codepen:<\/p>\n\n\n\n

\n See the Pen \n Variavel no CSS<\/a> by Leonardo-Ferreira-costa (@leonardo-ferreira-costa<\/a>)\n on CodePen<\/a>.<\/span>\n<\/p>\n