O que são variáveis CSS e como usá-las
Publicados: 2022-02-16Ao escrever o código CSS para o seu site, você pode usar as Propriedades Personalizadas do CSS (Variáveis) para acelerar o processo de desenvolvimento. Você pode usar variáveis para definir propriedades (tamanho, cor), que podem ser aplicadas a vários elementos.
Dessa forma, é possível ter mais controle sobre o código e o design. Alterar o valor de uma variável em um lugar substitui o valor dessa propriedade em todos os lugares em que ela é invocada.
Este post explicará como usar Variáveis CSS e algumas aplicações práticas.
Vamos começar!
Declarando uma variável
As variáveis podem ter escopo global ou local. Para definir uma variável globalmente, você usa o seletor :root.
:root { --base-font-size: 1.1rem; } :root { --base-font-size: 1.1rem; }O seletor :root corresponde à raiz do documento, que é <html> em nosso caso particular.
Para declarar uma propriedade personalizada CSS (variável), comece com dois traços (--). As variáveis diferenciam maiúsculas de minúsculas, por exemplo:
--base-font-size e --Base-Font-Size são duas variáveis diferentes.
Para definir uma variável localmente, você usa o seletor do elemento no qual deseja usar a variável.
#first-container { --background: #ccc; } #first-container { --background: #ccc; }Depois de definir a variável, é necessário invocá-la.
A função var()
A função var() é usada para inserir o valor da variável CSS definida. A função se substitui pelo valor da variável. Vejamos um exemplo:
O código HTML
- Copie e cole este código em seu editor de código.
- Salve o arquivo como index.html .
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/style.css"> <title>CSS Variables</title> </head> <body> <div class="wrapper"> <div class="container-1"> <p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste doloribus dolorum eaque veritatis quia quod?</p> <button type="button">Click here!</button> </div> <div class="container-2"> <p class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, dolorem. Reprehenderit mollitia quos quia qui.</p> <button type="button">Click here!</button> </div> <div class="container-3"> <p class="third">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi dolor reprehenderit, ad sunt aperiam officiis!</p> <button type="button">Click here!</button> </div> </div> </body> </html> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="/style.css"> <title>CSS Variables</title> </head> <body> <div class="wrapper"> <div class="container-1"> <p class="first">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iste doloribus dolorum eaque veritatis quia quod?</p> <button type="button">Click here!</button> </div> <div class="container-2"> <p class="second">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero, dolorem. Reprehenderit mollitia quos quia qui.</p> <button type="button">Click here!</button> </div> <div class="container-3"> <p class="third">Lorem ipsum dolor sit amet consectetur adipisicing elit. Nisi dolor reprehenderit, ad sunt aperiam officiis!</p> <button type="button">Click here!</button> </div> </div> </body> </html> 
O código CSS
- Crie um arquivo chamado style.css (no mesmo diretório de index.html ).
- Cole o código abaixo e salve o arquivo.
/* Global styles */ .wrapper, div { padding: 1rem; } div { margin: 1rem auto; } /* DEFINITION OF VARIABLES */ :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); } /* VARIABLES */ /* Wrapper */ .wrapper { background-color: var(--light-grey); } /* First Container */ .container-1 { /* The var() function replaces itself with the value of the variable */ border: var(--border-primary); color: var(--primary); background-color: var(--white); } .container-2 { /* The var() function replaces itself with the value of the variable */ border: var(--border-success); color: var(--success); background-color: var(--white); } .container-3 { /* The var() function replaces itself with the value of the variable */ border: var(--border-warning); color: var(--warning); background-color: var(--white); } .container-1 button { background-color: var(--primary); color: var(--white); } .container-2 button { background-color: var(--success); color: var(--white); } .container-3 button { background-color: var(--warning); color: var(--white); }< button {
border-radius: 5px; } /* Global styles */ .wrapper, div { padding: 1rem; } div { margin: 1rem auto; } /* DEFINITION OF VARIABLES */ :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); } /* VARIABLES */ /* Wrapper */ .wrapper { background-color: var(--light-grey); } /* First Container */ .container-1 { /* The var() function replaces itself with the value of the variable */ border: var(--border-primary); color: var(--primary); background-color: var(--white); } .container-2 { /* The var() function replaces itself with the value of the variable */ border: var(--border-success); color: var(--success); background-color: var(--white); } .container-3 { /* The var() function replaces itself with the value of the variable */ border: var(--border-warning); color: var(--warning); background-color: var(--white); } .container-1 button { background-color: var(--primary); color: var(--white); } .container-2 button { background-color: var(--success); color: var(--white); } .container-3 button { background-color: var(--warning); color: var(--white); }< button {
border-radius: 5px; } 
Há algumas coisas a serem observadas aqui:
- Criar uma paleta de cores é um processo simples.
- É possível usar uma variável dentro da definição de outra variável, como a cor na definição das variáveis de borda.
- As variáveis são herdadas, a propriedade color do elemento .container-* afeta seus filhos diretos. Neste caso, o elemento <p>.
Para substituir uma variável, você a declara dentro de seu contêiner, tornando-a mais específica.
- Edite o código CSS:
button { border-radius: 5px; /* Overriding a global variable */ --primary: #021b35; } button { border-radius: 5px; /* Overriding a global variable */ --primary: #021b35; } 
Variáveis e consultas de mídia
As variáveis também podem ser herdadas e substituídas nas consultas de mídia CSS.
- Adicione este código às variáveis:
:root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); /* Width of the wrapper 1000px / 90% on smaller devices */ --wrapper-width: 1000px; } :root { /* Color palette */ --primary: #007bff; --success: #28a745; --warning: #ffc107; --white: #f9f9f9; --light-grey: #d8d8d8; /* Borders */ /* It is possible to use an already declared variable within the definition of another variable */ --border-primary: 1px solid var(--primary); --border-success: 1px solid var(--success); --border-warning: 1px solid var(--warning); /* Width of the wrapper 1000px / 90% on smaller devices */ --wrapper-width: 1000px; }Definimos uma largura base para o elemento wrapper. Agora podemos aplicar essas variáveis à propriedade largura do .wrapper.
- Adicione este código ao final do arquivo CSS:
.wrapper { width: var(--wrapper-width);
margin: 0 auto; } .wrapper { width: var(--wrapper-width);
margin: 0 auto; } 
Para definir uma consulta de mídia para dispositivos com telas com menos de 1100px de largura, escrevemos a consulta de mídia a seguir.
- Edite o código CSS:
@media screen and (max-width: 1100px) { .wrapper { --wrapper-width: 90%; } } @media screen and (max-width: 1100px) { .wrapper { --wrapper-width: 90%; } } 
A nova definição de variável dentro da consulta de mídia substitui seu valor. Observe também que a variável está disponível no DOM, ou seja, pode ser recuperada e manipulada com JS. Isso não é possível com variáveis dentro de pré-processadores CSS.
Resumo
Variáveis são úteis para organizar e gerenciar pequenas e grandes quantidades de CSS. Eles reduzem a repetição e, portanto, evitam erros. Variáveis CSS são dinâmicas, ou seja, podem ser alteradas em tempo de execução. É fácil criar um tema para um site ou aplicativo dinamicamente com variáveis CSS. Eles fornecem a capacidade de atribuir valores a uma propriedade CSS com um nome personalizado. As variáveis seguem as regras padrão de cascata, portanto é possível definir a mesma propriedade em diferentes níveis de especificidade.
Espero que tenham gostado deste tutorial. Obrigado por ler!