Quando estamos desenvolvendo e estilizando as páginas, nós conseguimos perceber algumas repetições no arquivo do CSS, e quanto mais o projeto cresce, mais pode ser difícil a manutenção.
E por ser um problema recorrente, os criadores de pré-processadores CSS como o SASS adicionaram variáveis, mas o uso do SASS, por exemplo, adiciona mais um passo de processamento. Por isso, foram criadas as variáveis CSS e para usá-las é bastante simples.
Desenvolvi um pequeno projeto apenas para demonstrar como declarar as variáveis e utilizá-las.
Estrutura do arquivo HTML
<body>
<div class="container">
<main class="children">
<h2>Variáveis CSS</h2>
<blockquote cite="https://developer.mozilla.org/pt-BR/docs/Web/CSS/Using_CSS_custom_properties">Variáveis CSS são entidades definidas por desenvolvedores, contendo valores específicos para serem reutilizados ao longo do documento. São configuradas usando esta notação (ex: --cor-principal: black; ) e são acessadas usando a funcão var() (ex: color: var(--cor-principal); )</blockquote>
</main>
</div>
</body>
Como declarar as variáveis do arquivo CSS
As variáveis são declaradas na pseudo-classe :root, como no exemplo abaixo.
:root {
--background: #700353;
--background-alternative: #ffbfb7;
--text-color: #320d6d;
--h2-font-size: 3.8rem;
--blockquote-font-size: 1.6rem;
--border-radius: 10px;
--padding: 4rem;
}
E como eu posso usar as variáveis declaradas?
Para usar as variáveis é bastante simples, basta colocar var(nome-da-variável) no valor da propriedade.
.children {
width: 50rem;
height: 50rem;
background: var(--background-alternative);
text-align: center;
padding: var(--padding);
color: var(--text-color);
border-radius: var(--border-radius);
}
.children h2 {
font-size: var(--h2-font-size);
}
Preview do projeto
O link com o código completo no github é esse aqui.
Minhas redes:
Linkedin
Twitter
Fonte:
MDN
Espero ter ajudado a tornar seu desenvolvimento mais fácil e rápido.
Top comments (0)