Como usar variáveis CSS como um profissional
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:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Variables - Button Variations</title>
<link rel="stylesheet" href="Variables.css" />
</head>
<body>
<div>
<h1>CSS Variables</h1>
<div>
<button class="btn sub-primary">Primary</button>
<button class="btn">Secondary</button>
</div>
</div>
</body>
</html>
CSS:
.btn {
padding: 1rem 1.5rem;
background: transparent;
font-weight: 700;
color: red;
}
É assim que sua página deve ficar:
A classe .btn usada na folha de estilo acima não é dinâmica e faz com que você crie uma classe separada para customizar 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:
:root{
/*CSS variable*/
--variable_name: value;
}
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á a propriedade var() :
:root {
/*CSS variable*/
--primary: #900c3f;
--secondary: #ff5733;
}
.btn {
padding: 1rem 1.5rem;
background: transparent;
font-weight: 700;
color: var(--primary);
background-color: var(--secondary);
}
.sub-primary {
color: var(--secondary);
background-color: var(--primary);
}
O seletor raiz contém duas variáveis: –primary e –secondary . Ambas as variáveis são então substituídas na classe .btn como uma cor e uma 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.
A propriedade var() 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:
:root {
--primary: #900c3f;
--secondary: #ff5733;
}
.btn {
padding: 1rem 1.5rem;
background: transparent;
font-weight: 700;
color: var(--primary, blue);
}
Neste exemplo, substitua a variável –primary no estilo de cor . 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 armazenar o novo valor no cliente, como em um cookie, para manter as alterações.
Aqui está um exemplo de como usar JavaScript para atualizar o valor de uma variável CSS.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Variables - Button Variations</title>
<link rel="stylesheet" href="Variables.css" />
<script>
function changeColor() {
// Get the element you want to change the variable on
const myElement = document.querySelector(":root");
// Get the current value of the variable
let currentValue = getComputedStyle(myElement).getPropertyValue(
"--secondary"
);
// Set the new value for the variable
myElement.style.setProperty("--secondary", "#DAF7A6");
}
</script>
</head>
<body>
<div>
<h1>CSS Variables</h1>
<div>
<button class="btn sub-primary" onclick="changeColor()">
Primary
</button>
<button class="btn">Secondary</button>
</div>
</div>
</body>
</html>
CSS:
:root {
--primary: #900c3f;
--secondary: #ff5733;
}
.btn {
padding: 1rem 1.5rem;
background: transparent;
font-weight: 700;
}
.sub-primary {
color: var(--primary);
background-color: var(--secondary);
}
Nesse código JavaScript, a função changeColor() 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:
// Create a new variable
document.documentElement.style.setProperty('--new-color', 'blue');
// Remove a variable
document.documentElement.style.removeProperty('--new-color');
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, LESS 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, da mesma forma 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 $main-color e usá-la 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:
:root {
--primary: $main-color;
--secondary: lighten(var(--primary), 20%);
}
.btn {
color: var(--primary);
background-color: var(--secondary);
}
Aqui, a função SASS lighten() manipula o valor de –primary para obter um valor para –secondary .
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 recursos poderosos 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 –color- para variáveis de cor ou –spacing- para variáveis de espaçamento.
Use variáveis em consultas de mídia
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.
Deixe um comentário