Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. CSS3
Code

Propriedades Customizadas do CSS: Variáveis

by
Difficulty:IntermediateLength:ShortLanguages:

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Invariavelmente, variáveis existem em todas as linguagens de programação, já que são bem úteis. Você pode salvar um valor em uma variável e usá-la em diversos lugares, evitando repetição. Embora o CSS não seja uma linguagem de programação, a falta de variáveis limita suas capacidades.

Agora que as variáveis CSS nativas estão chegando, gostaria de discutir como elas diferem das variáveis do pré-processadores CSS e como usá-las apropriadamente.

Vantagens das Propriedades Customizadas

A sintaxe das propriedades customizadas é um pouco verbosa e muitos desenvolvedores podem achá-la feia. E um dos fatores que desencorajam o uso de variáveis nativas é o suporte a variáveis no Sass (e similares).

Mesmo pré-processadores como o Sass suportando variáveis, eles ainda são limitados e discutiremos isso nessa seção.

Não se pode atualizar variáveis de pré-processadores baseados em consultas de mídias. Para termos um site responsivo, é preciso alterar valores com base nas dimensões da tela. Pré-processadores não podem fazer isso. Vejamos o código abaixo:

Ele compilará em:

Como vemos, a atriuição dentro da consulta de mídia é ignorada por completo. Por outro lado, as variáveis CSS respeitarão tal atribuição.

Variáveis de pré-processadores não usam a cascata nem herança. Com variáveis nativas, não temos essas limitações. Uma outra importante vantagem das variáveis nativas é que elas são interoperáveis. Diferente das variáveis do Sass, que funcionarão apenas no Sass, as nativas funcionarão no arquivos CSS padrão e nos pré-processadores.

Sintaxe e Uso

Para entendermos como usar propriedades customizadas do CSS, comecemos com um exemplo simples:

Ao definirmos uma propriedade customizada, começamos por seu escopo. Ele determina os nodos da DOM em que a propriedade estará disponível. Usar :root faz com a propriedade esteja disponível em todos elementos. Lembre que as propriedades customizadas devem iniciar com dois traços.

Se pretende usar uma propriedade customizada, tem de referenciá-la com a função var(). Essa função tem dois argumentos: o primeiro é a propriedade em si, e o segundo é um valor alternativo. A alternativa é usada quando a propriedade não for declarada em nenhum ancestral ou seu valor for inválido.

Note que elas diferenciam maiúsculas ou minúsculas. Quer dizer que --text-color, --Text-Color e --text-Color são todas diferentes.

Há outras coisas que devemos lembrar ao usar var().

Primeiro: valores alternativos podem conter vírgulas e no caso de versão curta de valores, como para margem, não precisa separar os valores usando vírgula. Por exemplo, var(--para-font-family, "Lato", "Roboto"); atribui "Lato", "Roboto" como alternativa. E a alternativa para a propriedade border seria:

Segundo: não se usa variáveis como nomes de propriedades. O código abaixo mostrará erro na segunda declaração.

Configurando Valores com Calc()

Já falamos do básico, vejamos como criar valores para essas propriedades customizadas. Se você atribui um simples número a uma variável, você não poderá adicionar uma unidade para obter um valor válido. Ou seja, o código abaixo é inválido:

Você terá de usar a função calc() para realiza alguns cálculos e criar os valores CSS finais. Para fazer o código acima funcionar, devemos mudá-lo dessa forma:

Não estamos limitados apenas a px. Podemos usar qualquer unidade válida e disponível no CSS.

Usando Variáveis com JavaScript

Variáveis CSS nativas também podem interagir com JavaScript. Para obter seus valores, podemos usar o código abaixo:

A função trim() removerá espaços em branco do começo e final do valor.

Se quiser configurar o valor de uma propriedade, você terá de usar o método setProperty().

A variável --background contém preto, agora. Podemos configurar uma propriedade para referir outra usando var().

A declaração acima é totalmente válida e configura o valor de --h-color para o mesmo de --p-color.

Alterando Temas Dinamicamente

Variáveis podem prover bastante flexibilidade em relação a mudança de temas com base na preferência do usuário. Antigamente, usávamos estilos em linha ou várias folhas de estilo. Ambos os métodos tem seus deméritos. Criar várias folhas de estilo dá dor de cabeça e usar estilo em linha é uma má prática. Variáveis podem prover uma forma fácil de sair dessa situação. Eis um código básico que altera temas dinamicamente:

O código acima observa o evento de clique no botão do tema. Ao ser clicado, a função greenTheme() configura os valores de algumas variáveis para mudar o visual geral do site. Como podemos ver, esse método é muito mais fácil de implementar que as outras duas soluções.

Você pode adicionar algumas outras variáveis e criar mais temas nessa demonstração no CodePen.

Ideias Finais

Pode parecer que o tutorial sugere que as variáveis CSS nativas são superiores às dos pré-processadores, mas não diminuímos a utilidade dos mesmos. Usar pré-processadores CSS pode aumentar a produtividade. Eles tem muito mais a oferecer que apenas variáveis. Várias funções integradas, laços e declarações condicionais ajudam na realização das tarefas.

Esse tutorial apenas mostra que mesmo com a sintaxe estranha, as variáveis nativas tem muito a oferecer e vale usá-las em seus projetos. Qualquer dúvida em relação ao tutorial, deixe um comentário.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.