Embedded Files
Uma função CSS usada para aplicar Variáveis CSS Customizadas (também chamadas de Propriedades Customizadas). É um conceito extremamente útil para manter o seu código organizado!
Uma função CSS usada para aplicar Variáveis CSS Customizadas (também chamadas de Propriedades Customizadas). É um conceito extremamente útil para manter o seu código organizado!
O que é var() no CSS?
O que é var() no CSS?
A função var() é usada para buscar e inserir o valor que você definiu em uma variável customizada em qualquer lugar da sua folha de estilo.
Pense nisso como um atalho ou um apelido para um valor que você usa repetidamente (como uma cor, uma fonte ou um tamanho de espaçamento).
Como Funciona:
Para usar var(), você precisa de duas etapas:
1. Definir a Variável (Criar o Apelido)
As variáveis customizadas são definidas usando dois hífens -- antes do nome. O local mais comum para defini-las é no seletor :root, que representa o elemento raiz do seu documento (o <html>), tornando a variável acessível em todo o site:
CSS
:root {
--cor-principal: #007bff; /* Definição da cor azul */
--tamanho-fonte: 16px; /* Definição do tamanho da fonte */
}
2. Usar a Função var() (Buscar o Valor)
Em seguida, você usa a função var() para aplicar o valor dessa variável:
CSS
CSS
h1 {
h1 {
color: var(--cor-principal); /* Será aplicado o valor #007bff */
color: var(--cor-principal); /* Será aplicado o valor #007bff */
}
}
p {
p {
font-size: var(--tamanho-fonte); /* Será aplicado o valor 16px */
font-size: var(--tamanho-fonte); /* Será aplicado o valor 16px */
color: var(--cor-principal);
color: var(--cor-principal);
}
}
A Grande Vantagem
A Grande Vantagem
A principal razão para usar var() é a manutenção e a consistência:
Se você decidir mudar a cor principal do seu site de azul (#007bff) para vermelho (#ff0000), você só precisa alterar o valor em um único lugar (:root), e essa mudança será refletida automaticamente em todos os elementos que usam var(--cor-principal).
Em resumo, var() não é uma variável em si, mas a ferramenta para usar variáveis (Propriedades Customizadas) dentro do seu código CSS.
Você gostaria de aplicar uma variável para definir o espaçamento (padding) em alguns elementos, Leal?
A variável CSS customizada (definida com --) não precisa ser definida apenas no seletor :root. Você pode e deve usá-la em outros seletores, como div, p, ou qualquer classe (.minha-classe), dependendo do escopo que você deseja.
A variável CSS customizada (definida com --) não precisa ser definida apenas no seletor :root. Você pode e deve usá-la em outros seletores, como div, p, ou qualquer classe (.minha-classe), dependendo do escopo que você deseja.
O Conceito de Escopo
O Conceito de Escopo
Onde você define a variável determina o seu escopo, que é a parte do seu documento HTML onde essa variável pode ser usada.
1. :root (Escopo Global)
Definir a variável em :root é como criar uma variável global. Ela será acessível e poderá ser usada por qualquer elemento em toda a sua página:
CSS
:root {
--cor-texto: blue;
}
/* Qualquer elemento pode usar --cor-texto */
body {
color: var(--cor-texto);
}
Uso Comum: Cores primárias da marca, fontes base, e valores que são usados consistentemente em todo o site.
2. div ou Outro Seletor (Escopo Local) 🖼️
Definir a variável em um seletor específico, como div, cria uma variável local. Ela será acessível apenas pelo próprio elemento (div) e por todos os seus filhos dentro dessa divisão:
CSS
div {
--espacamento-interno: 20px;
background-color: var(--espacamento-interno); /* Funciona dentro da div */
}
/* O elemento 'p' pode usar a variável se estiver dentro da div */
div p {
padding: var(--espacamento-interno); /* Funciona aqui */
}
/* Um elemento fora da div NÃO conseguirá usar a variável */
footer {
/* color: var(--espacamento-interno); -> NÃO FUNCIONA */
}
Definição de Escopo
Definição de Escopo
Escopo é a região do código onde uma variável, função ou outro identificador é acessível e pode ser referenciado.
Em outras palavras, ele define onde o nome de algo (como uma variável ou uma variável CSS) é reconhecido e onde ele pode ser usado.
Conceitos Chave
Visibilidade: O escopo controla a visibilidade de um identificador. Se algo está fora do escopo, o código não consegue "enxergá-lo", e tentar usá-lo resultará em um erro.
Tempo de Vida: Em algumas linguagens, o escopo também afeta o tempo de vida de uma variável. Em escopos locais, a variável é criada quando o escopo começa e é destruída (liberada da memória) quando o escopo termina.
Escopo em JavaScript (JS)
No JavaScript, o escopo geralmente se divide em:
Escopo Global: Variáveis e funções declaradas no nível mais alto do seu código (fora de qualquer função ou bloco). Elas podem ser acessadas de qualquer lugar no seu programa.
Escopo de Função: Variáveis declaradas dentro de uma função. Elas só podem ser acessadas dentro dessa função.
Escopo de Bloco: Introduzido com let e const, ele limita o acesso a variáveis dentro de um bloco de código delimitado por chaves ({}).
Escopo em CSS (Variáveis Customizadas)
Como acabamos de discutir, o escopo das Variáveis Customizadas (--nome) é definido pela estrutura do DOM (Document Object Model):
Escopo Global (:root): A variável é acessível em todo o documento.
Escopo Local (div, .card): A variável é acessível apenas pelo seletor onde foi definida e por todos os seus elementos filhos.
O escopo é essencial para evitar conflitos de nomes e para garantir que o código seja organizado e fácil de manter.
Google Sites
Report abuse