A maioria dos sites usa CSS para aprimorar sua aparência e estilizar diferentes componentes da página da web. CSS, ou Cascading Style Sheet, não é tecnicamente uma linguagem de programação. No entanto, o CSS pode ser usado com linguagens de programação como JavaScript para criar páginas da Web responsivas e interativas.
Se você já usou linguagens de programação, como JavaScript, sabe que pode declarar uma variável, atribuir um valor a ela e reutilizá-la em várias partes do seu código. A boa notícia é que você pode aplicar o mesmo conceito em CSS.
Este artigo definirá variáveis CSS, descreverá seus benefícios e mostrará como declarar e usar uma variável em CSS.
últimas postagens
O que são variáveis em CSS?
As variáveis CSS são propriedades personalizadas que permitem aos desenvolvedores da Web armazenar valores que podem ser reutilizados por meio da folha de estilo. Por exemplo, você pode declarar o estilo da fonte, a cor do plano de fundo e o tamanho da fonte que pode reutilizar com elementos como cabeçalhos, parágrafos e divs em sua base de código.
Por que usar variáveis CSS? Estas são algumas das razões;
- Facilita a atualização do código: depois de declarar uma variável, você pode reutilizar toda a sua folha de estilo sem atualizar cada elemento manualmente.
- Reduz a repetição: À medida que sua base de código cresce, você descobrirá que possui classes e elementos semelhantes. Em vez de escrever código CSS para cada item, você pode simplesmente usar variáveis CSS.
- Torna seu código mais fácil de manter: a manutenção do código é importante se você deseja que sua empresa continue funcionando.
- Melhora a legibilidade: o mundo moderno incentiva a colaboração. O uso de variáveis em CSS resulta em uma base de código compacta e legível.
- Fácil de manter a consistência: as variáveis CSS podem ajudá-lo a manter um estilo consistente à medida que seu código-fonte cresce ou o tamanho do aplicativo aumenta. Por exemplo, você pode declarar as margens, preenchimento, estilo de fonte e cores a serem usadas em seus botões em todo o site.
Como declarar variáveis em CSS
Já que você sabe o que são variáveis em CSS e por que você deve usá-las, podemos prosseguir e ilustrar como declará-las.
Para declarar uma variável CSS, comece com o nome do elemento e, em seguida, escreva dois traços (–), o nome e o valor desejados. A sintaxe básica é;
element {
--variable-name: value;
}
Por exemplo, se você deseja aplicar preenchimento em todo o documento, pode declará-lo como;
body {
--padding: 1rem;
}
Escopo de Variáveis em CSS
Variáveis CSS podem ter escopo local (acessível dentro de um elemento específico) ou globalmente (acessível em toda a folha de estilo).
Variáveis locais
Variáveis locais são adicionadas a seletores específicos. Por exemplo, você pode adicioná-los a um botão. Isto é um exemplo;
.button {
--button-bg-color: #33ff4e;
}
A variável de cor de fundo está disponível no seletor de botões e seus filhos.
Variáveis globais
Depois de declarado, você pode usar variáveis globais com qualquer elemento em seu código. Usamos a pseudoclasse :root para declarar variáveis globais. É assim que os declaramos;
:root {
--primary-color: grey;
--secondary-color: orange;
--font-weight: 700:
}
No código acima, você pode usar qualquer uma das variáveis declaradas com diferentes elementos, como cabeçalhos, parágrafos, divs ou até mesmo o corpo inteiro.
Como usar Variáveis em CSS
Vamos criar um projeto para fins de demonstração e adicionar os arquivos index.html e styles.css.
No arquivo index.html, podemos ter um div simples com dois cabeçalhos (h1 e h2) e um parágrafo (p).
<div> <h1>Hello Front-end Dev!!!!</h1> <h2>This is how to use variables in CSS.</h2> <p> Keep scrolling</p> </div>
No arquivo style.css, podemos ter o seguinte;
:root {
--primary-color: grey;
--secondary-color: orange;
--font-weight: 700:
--font-size: 16px;
--font-style: italic;
}
body {
background-color: var(--primary-color);
font-size: var(--font-size);
}
h1 {
color: var(--secondary-color);
font-style: var(--font-style)
}
h2 {
font-weight: var(--font-weight)
}
p {
font-size: calc(var(--font-size) * 1.2);
}
Quando a página da web for renderizada, teremos o seguinte;
No código acima, declaramos variáveis globais no elemento :root. Devemos usar a palavra-chave var para usar a variável global em qualquer um de nossos elementos. Por exemplo, para aplicar a cor de fundo que declaramos como variável global, apresentamos nosso código da seguinte forma;
cor de fundo: var(–cor primária);
Verifique todos os outros elementos e você notará uma tendência em como a palavra-chave var é aplicada.
Use variáveis CSS com JavaScript
Usaremos variáveis locais e globais para ilustrar como usar variáveis CSS com JavaScript.
Podemos adicionar um elemento de alerta ao nosso código existente;
Nosso novo documento index.html será o seguinte;
<div> <h1>Hello Front-end Dev!!!!</h1> <h2>This is how to use variables in CSS.</h2> <p> Keep scrolling</p> </div> <div class="alert">Click me!</div>
Podemos estilizar nossa variável. Adicione o seguinte código ao seu código CSS existente;
.alert {
--bg-color: red; /* Define local variable */
background-color: var(--bg-color); /* Use the local variable for the background color */
padding: 10px 20px;
border-radius: 4px;
font-weight: var(--font-weight); /*Use the global variable for font weight*/
width: 50px;
}
Fizemos o seguinte;
- Definiu uma variável local dentro do elemento alert;
–bg-cor: vermelho
- Usou a palavra-chave var para acessar essa variável local;
cor de fundo: var(–bg-color);
- Usamos a variável global que declaramos anteriormente como nosso peso de fonte;
peso da fonte: var(–peso da fonte);
Adicionar código JavaScript
Podemos tornar nosso elemento de alerta responsivo; quando você clica nele, você obtém um pop-up em seu navegador que diz; “Usamos variáveis CSS com JavaScript!!!!”.
Podemos adicionar código JavaScript diretamente ao código HTML, colocando-o entre as tags . O código JavaScript deve vir depois do código HTML, mas antes de fechar a tag
