Guia do Iniciante para Variáveis ​​CSS (também conhecido como CSS Custom Properties)

Índice:

• Variáveis ​​CSS em pré-processadores #
• Variáveis ​​(propriedades personalizadas) em CSS nativo #
• Por que “Propriedades Personalizadas”? #
• Onde as variáveis ​​CSS são definidas? #
• Notas técnicas sobre variáveis ​​CSS #
• Entendendo a função var() #
• Usando Variáveis ​​CSS com calc() #
• Truques com Variáveis ​​CSS #

Variáveis ​​CSS em pré-processadores

Os pré-processadores CSS usam Variáveis ​​CSS há mais de 10 anos. Não entrarei em detalhes sobre essas opções aqui, mas acho útil saber como cada uma das bibliotecas de pré-processadores populares usa variáveis.

Em Sass (ou SCSS), você declara variáveis ​​da seguinte forma:

Observe o cifrão ($). A primeira linha é a declaração da variável e seu valor. Os dois blocos a seguir são exemplos das variáveis ​​em uso posteriormente na folha de estilo.

Variáveis ​​em Less.js usam o símbolo @ :

E nas variáveis ​​Stylus ficam assim:

Você pode consultar as seções de documentação individual para cada um dos pré-processadores mostrados acima se quiser analisar mais detalhadamente as variáveis ​​usando essas tecnologias de terceiros.

Variáveis ​​(propriedades personalizadas) em CSS nativo

Isso nos leva a Variáveis ​​CSS, ou Propriedades Personalizadas, conforme definidas na especificação CSS. Para declarar uma variável em CSS simples, coloque dois hífens na frente do nome personalizado escolhido para a variável ou propriedade e use a função var() para colocar esse valor onde desejar:

Neste exemplo, defini duas variáveis ​​CSS: --main e --accent . Em seguida, usei cada variável CSS em dois elementos diferentes, demonstrando a flexibilidade que eles abrem.

Assim como as variáveis ​​em qualquer linguagem de programação, isso permite que você declare uma variável em um único local. Se mais tarde você quiser alterar esse valor em todos os lugares da sua folha de estilo, basta alterar a declaração original e ela se aplicará a todos os locais em que você usar a variável.

Por que “Propriedades Personalizadas”?

Na conversa cotidiana, os desenvolvedores geralmente se referem a esse recurso como “variáveis ​​CSS”, de acordo com a forma como os pré-processadores e as linguagens de programação se referem ao mesmo recurso. Mas de uma perspectiva estritamente técnica, essas não são realmente “variáveis”, mas são Propriedades Personalizadas .

Eles têm a mesma sintaxe de qualquer propriedade predefinida em CSS, exceto pelos dois traços que aparecem na frente do nome da propriedade. Os dois hífens permitem que os autores de CSS usem qualquer identificador pontilhado válido sem medo de conflito com as propriedades regulares do CSS.

A especificação explica que apenas dois traços são inválidos (aparentemente reservados para uso futuro) e o CSS nunca dará significado a qualquer identificador de traço válido além de seu uso como uma propriedade personalizada definida pelo autor.

Ao contrário das propriedades CSS normais, as Propriedades Personalizadas diferenciam maiúsculas de minúsculas. Isso significa --main-color não é o mesmo que --Main-Color . Os caracteres válidos a serem incluídos no nome da propriedade customizada são letras, números, sublinhados e hífens.

Onde as variáveis ​​CSS são definidas?

Como você pode ver no exemplo que forneci acima, muitas vezes você verá propriedades personalizadas CSS definidas diretamente no elemento raiz de um documento HTML ou shadow DOM. O seletor de pseudoclasse :root faz isso.

Mas as Variáveis ​​CSS não se limitam a ser definidas apenas no elemento raiz e muitas vezes é benéfico defini-las em outro lugar. O seletor :root é comumente escolhido porque sempre tem como alvo o elemento mais alto na árvore DOM (seja o documento completo ou o shadow DOM).

Na maioria dos casos, você obteria o mesmo resultado definindo propriedades personalizadas no elemento html (que é o elemento raiz em documentos HTML) ou até mesmo no elemento body . Usar :root permite que o código seja mais à prova de futuro (por exemplo, se a especificação um dia adicionar um novo elemento como raiz, o CSS permanecerá o mesmo) e suponho que também permita que uma folha de estilo seja aplicada a um tipo diferente de documento que tem um elemento raiz diferente.

Por exemplo, o código a seguir limitaria suas propriedades personalizadas para uso apenas no elemento .sidebar :

Para fins de demonstração, muitas vezes você verá variáveis ​​definidas em :root , mas você pode usá-las em qualquer lugar que seja prático. Na verdade, muitos desenvolvedores recomendam configurá-los mais abaixo na árvore DOM para módulos menores durante o desenvolvimento inicial e, em seguida, trabalhar em direção a :root à medida que você cria valores com escopo maior.

Notas técnicas sobre variáveis ​​CSS

Além de poder aplicar em qualquer elemento, as Variáveis ​​CSS são bastante flexíveis e fáceis de lidar.

Aqui estão algumas coisas dignas de nota:

• Eles são resolvidos com herança CSS regular e regras de cascata
• Você pode usá-los em consultas de mídia e outras regras condicionais
• Você pode defini-los no atributo de style de um elemento
• Eles podem ser lidos ou configurados usando recursos do CSS Object Model.

Também é notável que você pode essencialmente aninhar variáveis ​​CSS. Observe o exemplo a seguir:

Observe que defini uma variável --main-color , então estou usando esse mesmo nome de variável como um valor para a seguinte variável CSS.

Você também pode usar a palavra-chave !important em um valor de variável CSS, mas isso só aplica a “importância” à própria variável em relação a outras definições de variável e não ao valor usado em um ou mais elementos no documento. Se isso é confuso, aqui está um exemplo:

No exemplo acima, a cor de fundo seria “azul claro”, embora laranja apareça mais tarde nas definições das variáveis. Mas o próprio valor de fundo no elemento body não teria nenhuma importância.

As variáveis ​​CSS também podem conter valores de palavras-chave em todo o CSS, como initial , inherit e unset , mas a propriedade all não afeta as variáveis ​​CSS (ou seja, elas não são redefinidas).

Entendendo a função var()

Você já viu a função var() usada em alguns exemplos típicos neste tutorial de Variáveis ​​CSS. Mas há mais em var() do que eu cobri até agora.

Primeiro, a função var() é válida apenas em um valor; um nome de propriedade ou seletor não pode usar uma variável CSS. Além disso, um valor de consulta de mídia não pode usar uma variável CSS (por exemplo @media (max-width: var(--my-var)) é inválida).

A função var() recebe dois argumentos:

• O nome da propriedade customizada a ser incluída
• Um valor de fallback caso a propriedade personalizada seja inválida

Aqui está um exemplo em que o segundo argumento entra em vigor:

Observe no código acima que eu escrevi o nome da variável inicial usando a palavra britânica ou canadense “color”, mas quando usei a variável eu incorporei a ortografia americana “color”. Isso torna a variável tecnicamente inválida e, portanto, o plano de fundo cinza ( #ccc ) entra em vigor.

Observe também que um valor de fallback pode conter suas próprias vírgulas. Então, por exemplo, se seu fallback for uma pilha de fontes, essa seria uma maneira válida de defini-lo:

Observe novamente que minha variável tem uma falha, declarando um --main-type desconhecido em vez de --main-font . Isso aciona o valor de fallback, que é uma pilha de fontes alternativa. Assim, tudo após a primeira vírgula (mesmo incluindo quaisquer outras vírgulas) é o valor de fallback.

Usando variáveis ​​CSS para parciais

Ao definir uma variável CSS, o valor que ela contém não precisa ser um valor CSS válido em si; pode ser um valor parcial que pode ser usado como parte de um valor completo.

Por exemplo, você pode dividir uma pilha de fontes:

Nesse caso, cada um dos valores de variável funciona por conta própria, mas demonstra o ponto. Vamos tentar um exemplo mais elaborado usando a notação de cor rgba() :

Você pode ver como isso pode ser útil, permitindo que você essencialmente “construa” valores dinamicamente.

Usando variáveis ​​CSS com calc()

Uma das maneiras úteis de incorporar variáveis ​​CSS em seus projetos é em conjunto com a função calc() . Como você deve saber, calc() permite realizar cálculos dentro de um valor. Então você pode fazer algo assim:

As propriedades personalizadas de CSS permitem que você leve calc() para o próximo nível, por exemplo, com tamanhos predefinidos. Ahmad Shadeed descreveu algo semelhante e aqui está um exemplo:

Com isso em vigor, posso usar os conjuntos de regras .module e .module-* dentro de consultas de mídia, permitindo-me mostrar esses estilos condicionalmente para tamanhos de janela de visualização específicos ou outros recursos de mídia. Os módulos pequenos/médios/grandes teriam as mesmas classes que o módulo primário, mas apenas o tamanho do módulo é substituído conforme necessário. No exemplo acima, o valor inicial de 240 para o tamanho funciona como uma espécie de padrão, mas eu também poderia passar 240px como um segundo argumento em var() para funcionar como um fallback.

Truques com Variáveis ​​CSS

Vários desenvolvedores compartilharam dicas e truques usando Variáveis ​​CSS ao longo dos anos. Não vou detalhar isso aqui, pois este é principalmente um tutorial para iniciantes, mas aqui está um rápido resumo de alguns:

• Como mencionei anteriormente, você pode usar Variáveis ​​CSS em estilos embutidos, como no caso de caixas de proporção.
• Um caractere de espaço é um valor válido para uma variável CSS, que permite que você faça um truque liga/desliga (por exemplo, para algo como o modo escuro), sobre o qual você pode ler no post de Lea.
• Você não pode escrever estilos de foco em estilos embutidos, mas pode contornar isso usando Variáveis ​​CSS.
• As variáveis ​​CSS ajudam a criar SVGs multicoloridos com mais facilidade, conforme descrito aqui.
• Você pode construir sistemas de design e temas práticos e de fácil manutenção com as Variáveis ​​CSS, explicadas em detalhes neste post
• Você pode usar Variáveis ​​CSS para construir grades mais eficientes e sustentáveis ​​usando recursos de Layout de Grade, conforme descrito por Michelle Barker.

Conclusão

As Variáveis ​​CSS, ou Propriedades Personalizadas CSS, estão prontas para uso hoje, com mais de 90% dos navegadores em uso globalmente suportando esse recurso útil. Espero que esta discussão sobre o básico e a sintaxe o encoraje a considerar as Variáveis ​​CSS em seus projetos mais recentes, caso ainda não o tenha feito.

Se o seu uso de variáveis ​​CSS foi limitado a algumas cores de temas globais, talvez este tutorial o inspire a fazer mais uso delas e possivelmente crie alguns truques próprios.

Agora que você terminou com as variáveis ​​CSS, confira alguns de nossos outros guias:

• Layout de grade CSS
• Introdução ao Parcel.js
• Curso de flexbox CSS
• Webpack para iniciantes
• Tutorial de microinterações para desenvolvedores iniciantes

Caso você tenha alguma dúvida sobre este tutorial de Variáveis ​​CSS, sinta-se à vontade para enviá-las nos comentários abaixo.

Layout e apresentação de Chris Fitzgerald e Karol K.