As variáveis CSS, também conhecidas como propriedades personalizadas, ajudam a minimizar a repetição em suas folhas de estilo. Isso, por sua vez, ajuda você a economizar tempo e esforço ao fazer alterações em seu design. Você também pode ter certeza de que não perderá nenhum valor que precise atualizar.
O acesso ao DOM permite criar variáveis, armazená-las e reutilizá-las em toda a sua folha de estilo.
Como definir e usar variáveis CSS
Para tornar suas folhas de estilo mais organizadas, sustentáveis e reutilizáveis, você pode utilizar variáveis CSS em qualquer propriedade que aceite um valor.
Veja o exemplo a seguir de um arquivo HTML e um arquivo CSS que não usa variáveis CSS.
HTML:
html>
<htmlidioma="en">
<cabeça>
<título>Variáveis CSS - Variações de botãotítulo>
<linkrele="folha de estilo"href="Variáveis.css" />
cabeça>
<corpo>
<div>
<h1>Variáveis CSSh1>
<div>
CSS:
.btn {
preenchimento: 1rem 1.5rem;
fundo: transparente;
peso da fonte: 700;
cor vermelha;
}
É assim que sua página deve ficar:
O .btn A classe usada na folha de estilo acima não é dinâmica e faz com que você crie uma classe separada para personalizar botões individuais. A criação de sites bonitos exige que você seja dinâmico com seu estilo de front-end. A implementação de botões dessa maneira simplesmente tornará essa tarefa difícil de ser realizada.
Como a maioria das linguagens de programação, você precisa inicializar e substituir as variáveis CSS.
Para inicializar uma variável CSS, prefixe o nome da variável com hífens duplos:
:raiz{
/*variável CSS*/
--variable_name: valor;
}
Você pode inicializar uma variável em qualquer lugar, mas observe que só poderá usar essa variável dentro do seletor inicializado. Por causa disso, as variáveis CSS são inicializadas convencionalmente dentro do seletor raiz. Isso visa o elemento de nível mais alto do DOM e permite que as variáveis sejam acessíveis por todo o documento HTML em escala global.
Para substituir a variável em seu estilo CSS, você usará o var() propriedade:
:raiz {
/*variável CSS*/
--primário: #900c3f;
--secundário: #ff5733;
}.btn {
preenchimento: 1rem 1.5rem;
fundo: transparente;
peso da fonte: 700;
cor: var(--primário);
cor de fundo: var(--secundário);
}
.sub-primário {
cor: var(--secundário);
cor de fundo: var(--primário);
}
O seletor raiz contém duas variáveis: --primário e --secundário. Ambas as variáveis são então substituídas no .btn class como uma cor e cor de fundo, respectivamente.
Usando as variáveis, você pode estilizar elementos individuais com muito mais facilidade. Ao reutilizar variáveis, você pode alterar rapidamente um valor uma vez para atualizá-lo em todas as instâncias.
O var() propriedade também pode receber um segundo argumento. Esse argumento atua como um valor de fallback para o primeiro argumento em uma situação em que o primeiro não está definido ou é inválido.
Por exemplo:
:raiz {
--primário: #900c3f;
--secundário: #ff5733;
}
.btn {
preenchimento: 1rem 1.5rem;
fundo: transparente;
peso da fonte: 700;
cor: var(--primário, azul);
}
Neste exemplo, substitua o --primário variável em cor estilo. Se, por algum motivo, esse valor falhar, a folha de estilo usará o segundo valor como substituto. Você também pode usar outra variável CSS como um valor alternativo.
Manipulando e substituindo variáveis CSS com JavaScript
A manipulação de variáveis CSS usando JavaScript pode ser uma maneira poderosa de alterar a aparência do seu site rapidamente. Usando JavaScript, você pode atualizar os valores dessas variáveis e ver as alterações refletidas em seu site.
É importante observar que as alterações feitas com JavaScript serão aplicadas apenas à sessão atual. Você deve atualizar a fonte original ou armazene o novo valor no cliente, como em um cookie, para persistir as alterações.
Aqui está um exemplo de como usar JavaScript para atualizar o valor de uma variável CSS.
HTML:
html>
<htmlidioma="en">
<cabeça>
<título>Variáveis CSS - Variações de botãotítulo>
<linkrele="folha de estilo"href="Variáveis.css" />
<roteiro>
funçãomudar cor() {
// Obtém o elemento no qual você deseja alterar a variável
const meuElemento = documento.querySelector(":raiz");// Obtém o valor atual da variável
deixar currentValue = getComputedStyle (meuElemento).getPropertyValue(
"--secundário"
);
// Definir o novovalorpara o variável
meuElemento.estilo.setProperty("--secundário", "#DAF7A6");
}
roteiro>
cabeça>
<corpo>
<div>
<h1>Variáveis CSSh1>
<div>
CSS:
:raiz {
--primário: #900c3f;
--secundário: #ff5733;
}.btn {
preenchimento: 1rem 1.5rem;
fundo: transparente;
peso da fonte: 700;
}
.sub-primário {
cor: var(--primário);
cor de fundo: var(--secundário);
}
Neste código JavaScript, o mudar cor() A função atualiza a cor do primeiro botão quando o usuário clica nele.
Usando Métodos de travessia do DOM, você pode acessar as classes ou seletores aplicados em seu documento HTML e manipular os valores.
Antes de clicar no botão:
Após clicar no botão:
Você também pode usar JavaScript para criar novas variáveis CSS ou removê-las completamente.
Por exemplo:
// Criar a novovariável
documento.documentElement.style.setProperty('--nova cor', 'azul');
// Remove uma variável
documento.documentElement.style.removeProperty('--nova cor');
Usando variáveis CSS com pré-processadores
O uso de variáveis na tecnologia de front-end foi inicialmente obtido com pré-processadores CSS como SASS, MENOS e Stylus.
O propósito dos pré-processadores CSS é desenvolver código que estenda as capacidades fundamentais do CSS padrão. Em seguida, tenha esse código compilado em CSS padrão para o navegador entender, assim como como o TypeScript funciona com JavaScript.
Com o desenvolvimento de variáveis CSS, os pré-processadores não são mais tão importantes, mas ainda podem oferecer alguma utilidade se combinados com variáveis CSS em seu projeto.
Você pode definir uma variável SASS $ cor principal e use-o para definir o valor de uma variável CSS. Em seguida, use a variável CSS em uma classe de estilo regular.
Você também pode usar funções SASS para manipular os valores das variáveis CSS.
Por exemplo:
:raiz {
--primary: $cor principal;
--secundário: clarear(var(--primário), 20%);
}
.btn {
cor: var(--primário);
cor de fundo: var(--secundário);
}
Aqui, a função SASS clarear() manipula o valor de --primário obter um valor para --secundário.
Observe que as variáveis SASS não são acessíveis por JavaScript. Portanto, se você precisar manipular os valores de suas variáveis em tempo de execução, use variáveis CSS.
Usando variáveis CSS e pré-processadores juntos, você pode aproveitar ambos os benefícios, como usar poderosos recursos de pré-processador, como loops e funções, e recursos de variáveis CSS, como CSS em cascata.
Dicas para usar variáveis CSS no desenvolvimento da Web
Aqui estão algumas dicas importantes a serem observadas que ajudarão você a utilizar melhor as variáveis CSS.
Comece com uma convenção de nomenclatura clara
Escolha uma convenção de nomenclatura para suas variáveis que as torne fáceis de entender e usar. Por exemplo, use um prefixo como --cor- para variáveis de cor ou --espaçamento- para variáveis de espaçamento.
Use variáveis em consultas de mídia para facilitar o ajuste de seu design para diferentes tamanhos de tela.
Aproveite a natureza em cascata do CSS
Lembre-se de que as variáveis CSS estão em cascata, o que significa que, se você definir uma variável em um elemento pai, ela afetará todos os seus filhos.
Use variáveis CSS com cuidado
O uso de muitas variáveis CSS pode causar confusão, portanto, use-as com cautela e somente quando fizer sentido e melhorar a capacidade de manutenção do seu código.
Teste suas variáveis
As variáveis CSS são uma maneira única de escrever um código claro e sustentável em sua folha de estilo.
É importante observar que eles ainda não são totalmente suportados em todos os navegadores. Portanto, você deve testar suas variáveis quanto à compatibilidade do navegador para garantir que elas estejam funcionando conforme o esperado e que quaisquer valores alternativos funcionem conforme o esperado.