Eu tenho experimentado variáveis CSS por algum tempo agora. Se você ainda não os abordou, use este pequeno guia para encontrar rapidamente o caminho de volta e começar a trabalhar.
O que é isso
Um exemplo simples de aplicação para botões com um escopoAs variáveis CSS permitem definir valores reutilizáveis em CSS.
Eles apareceram há muito tempo. Recentemente, eles começaram a ganhar popularidade devido ao suporte mais amplo ao
navegador .
Se você usa um pré-processador, como o SASS, já está familiarizado com as variáveis. Agora você pode fazer a mesma coisa sem um pré-processador.
Por que usar variáveis de estilo?
As variáveis nos permitem aderir ao princípio de DRY (não se repita). Graças a eles, também temos uma maneira de criar um único ponto de referência para valores duplicados. Se você usa um pré-processador, provavelmente as vantagens dessa abordagem já lhe são familiares. Na maioria das vezes, isso é usado para definir a cor base, que é usada para muitos elementos.
Repita a cor de fundo para vários seletoresNo snippet acima, o valor de
#e74c3c pode e deve ser uma variável. Se fizermos uma variável a partir desse valor, obteremos um único ponto que pode ser referenciado. Isso reduz o risco de erros e problemas de estilo, pois facilita a manutenção.
Criando um ponto de referência usando uma variávelNo segundo trecho, eu uso um pré-processador para mostrar como você pode usar uma variável para o valor da
background-color .
Por que não usar variáveis de pré-processador em vez de variáveis CSS nativas?
Boa pergunta Na maioria dos casos, você prefere permanecer comprometido com as variáveis do pré-processador. Isso é verdade se você já os estiver usando. Mas você pode tirar proveito de ambas as abordagens ao mesmo tempo. Isso se torna relevante quando é necessário utilizar totalmente os recursos das variáveis CSS nativas. Mais sobre isso mais tarde.
Variáveis CSS nativas devem ser usadas quando:
- Você não possui um pré-processador ou não o utiliza.
- Você deseja tirar proveito das variáveis CSS nativas.
Principais benefícios das variáveis nativas de CSS
Na minha opinião, variáveis CSS nativas têm duas grandes vantagens.
O primeiro. Eles são atualizados em tempo de execução! Eles podem ser controlados usando consultas de mídia, estados ou mesmo JavaScript. O navegador aplicará as alterações feitas. Isso abre muitas possibilidades.
Além disso, as variáveis CSS permitem escopo. Isso significa que, por exemplo, você pode alterar o estilo ou o comportamento de um elemento atualizando o valor de uma variável. Caso contrário, você deve registrar novos estilos para esse elemento do zero. Como resultado, o volume de CSS na saída diminui.
Não é a sintaxe mais bonita
Vejamos um exemplo.
O que é um pseudo-
:root ? Tudo é lógico: é um pseudo-seletor de uma raiz de árvore. O seletor
:root pode ser usado para definir variáveis globais. Nesse caso, definimos o valor de
rebeccapurple para a variável
--primary .
Para definir uma variável, dois hífens são usados como prefixo.
Para usar uma variável, precisamos da função
var .
E o que acontece quando nos referimos a uma variável cujo valor não está definido? Nesse caso, você pode definir valores de fallback ou valores padrão. A função
var suporta um segundo parâmetro opcional, correspondente a valores de fallback ou valores padrão.
Esse trecho define o estilo de origem da tag do
button . Sempre que possível para
background-color , o valor
--btn-color . Se a variável não existir ou o valor não estiver definido, o valor
--primary .
Não há necessidade de usar uma variável para nosso fallback. Você pode pegar o valor. Porém, com variáveis, será mais fácil implementar o suporte ao código.
Observe que nenhum estilo é declarado para
button.btn . Em vez disso, o valor é atualizado. Agora é apropriado continuar em cascata e escopo.
Cascatas e escopos
Ao trabalhar com variáveis, a cascata é levada em consideração, assim como o escopo das variáveis. No exemplo anterior, as variáveis são declaradas na pseudo-
:root . Todas as variáveis no seletor
:root têm escopo global.
Em um exemplo acima, o
--primary estava disponível para todos os seletores. Devido ao escopo, esse valor pode ser substituído. Por exemplo, queremos que o valor
--primary alterado para a classe
premium .
Nesse fragmento, o valor da variável
--primary de um elemento da classe
premium é
dodgerblue . Ou seja, se nenhuma classe for aplicada ao
button , o valor da variável será
rebeccapurple . No entanto, se você aplicar a classe
premium , a cor mudará para
dodgerblue .
Vale ressaltar que, assim como nos estilos embutidos, as variáveis CSS embutidas têm a maior prioridade.
Nesse fragmento, a cor do plano de fundo do botão será definida para
red , apesar do fato de a classe
premium ser usada aqui. Isso acontece porque o valor
--primary descrito diretamente na tag.
Gerenciamento de valor
Você pode controlar os valores das variáveis CSS usando outras regras CSS. As principais abordagens são consultas de mídia e alterações de estado.
Por exemplo, o valor de uma variável pode mudar quando a largura da tela exceder um determinado valor.
A alteração iniciará o redesenho do navegador e mostrará o resultado ao usuário.
Nesse caso, o gradiente do plano de fundo será alterado se a largura exceder
768px .
Como gerenciar variáveis usando estados? Por exemplo, pegue o
button . A variável CSS será atualizada com base no estado do
button .
Nesse caso, você pode personalizar o estilo do botão com base no estado
:active .
Gerenciando valores usando JavaScript
Gerenciar variáveis do CSS é muito conveniente. Mas, para realmente obter controle sobre eles, você deve controlá-los usando JavaScript. Felizmente, isso é real.
O método
setProperty permite definir e gerenciar variáveis de estilo do elemento.
Como atualizar o conjunto de variáveis na pseudo-
:root ? Boa pergunta Você precisará definir propriedades do
documentElement para
documentElement .
Quando você pode manipular variáveis CSS dessa maneira, há muitas possibilidades. Curioso para acompanhar a posição do cursor com o evento
mousemove .
Usando calc () e descartando unidades
Tente não usar unidades em variáveis. Isso facilitará mais manutenção.
A função
calc() permite normalizar e definir valores com as unidades desejadas.
As variáveis CSS podem até ser usadas para armazenar informações sobre unidades preferidas. Para maior clareza, pegamos "1px" no fragmento, mas você pode substituí-lo por "1pt", "1rem" etc.
A falta de unidades geralmente é mais relevante quando os valores são definidos no JavaScript. Ao processar valores puros, nosso script abstrai do CSS. A conexão está interrompida.
Quando as unidades estão contidas no CSS, o serviço também passa pelo CSS.
Exemplos de aplicação
Ainda estou estudando vários exemplos de uso de variáveis CSS. Primeiro de tudo, um tema dinâmico vem à mente. Rastrear o cursor e rolar a tela também são aplicações interessantes. Eu preparei
materiais de treinamento, que podem ser encontrados abaixo.
Exemplo com um cachorro e uma bola
Vamos trabalhar um exemplo juntos!
Aqui, simplesmente rastreamos a posição do cursor e atualizamos a posição dos dois emojis.
O principal aqui é transferir emojis de um ponto central usando o
translate e, ao mesmo tempo, aplicar
transition-delay ao cão.
Como atualizar a situação? Usando variáveis para
--y e
--y .
Como fazer o cachorro ficar atrasado?
transition-delay é aplicado. Um efeito de desaceleração complexo também pode ser alcançado usando
transition-timing-function .
Resta apenas atualizar essas variáveis para o
mousemove .
Isso é tudo. Mais algumas pequenas melhorias e algo assim acontece:
Desvantagens
Até agora, o trabalho com variáveis CSS foi bem tranquilo. Eu raramente encontrava situações em que algo não dava certo. Aqui estão algumas possibilidades que eu gostaria de ver para variáveis CSS.
- Animação de variáveis. Neste artigo, eu não falei sobre animação. Você pode usar variáveis para isso. Mas a animação dos próprios valores não pode ser feita.
- Variáveis CSS não podem ser usadas em seletores. Isso é lógico, mas seria ótimo se esse nível de interpolação estivesse disponível. Usar variáveis no seletor enésimo filho seria legal.
Conclusão
Eu gosto de trabalhar com variáveis CSS. Quanto mais eu os faço, mais exemplos de aplicativos vêm à mente.
Graças a este artigo, você mesmo pode começar a aprender variáveis CSS.
Se você estiver interessado em obter uma visão geral mais detalhada das variáveis CSS, confira este
vídeo .
LOOKING.HOUSE - o projeto coletou mais de 150 pontos de espelho em 40 países. Você pode executar rapidamente comandos host, ping, traceroute e mtr.
