Como adicionar variáveis ​​CSS para personalizar temas filhos do WordPress

Variáveis ​​CSS, também conhecidas como propriedades customizadas CSS, permitem a fácil reutilização em suas folhas de estilo CSS.

Se você já trabalhou com temas filhos do WordPress, provavelmente se verá estilizando e substituindo itens como cor, preenchimento etc. CSS. As variáveis ​​CSS são opcionais e, à medida que avança, você começará a ver como as variáveis ​​o beneficiarão.

Eles não pretendem substituir os pré-processadores CSS, sendo o mais popular o SASS. Muitos construtores usam SASS especificamente para projetos maiores e, junto com variáveis ​​CSS como peça principal, oferece muitas opções avançadas.

No entanto, se você já trabalhou com pré-processadores antes, sabe que eles precisam ser compilados para produzir o CSS. Por esse motivo, este tutorial se concentrará nas variáveis ​​CSS e não se aprofundará em detalhes sobre pré-processadores.

As variáveis ​​CSS são um meio-termo feliz e, felizmente, há um forte suporte do navegador. Antes de se comprometer a usar variáveis ​​CSS na produção, verifique se posso usar para garantir que elas tenham o suporte necessário.

Variáveis ​​CSS são mais eficientes do que trabalhar com CSS simples, mas não requerem uma configuração avançada como SASS. O navegador faz a “compilação” e você não depende da configuração e do ambiente que gera o CSS compilado.

Essa abordagem é um bom projeto adequado para coisas como estilizar temas filhos simples do WordPress. Para projetos como esse, tende a haver a necessidade de fazer atualizações de estilo para criar um tema de marca. Variáveis ​​CSS podem ajudar, pois fornecem uma lista gerenciável de substituições de estilo e não requerem um ambiente especial para compilar SASS para CSS.

Obtenha Genesis Framework e Temas StudioPress de graça!

Os clientes do WP Engine obtêm acesso a um conjunto de temas premium do WordPress que vem como padrão em todos os planos! Você pode começar a construir seu próximo site por apenas $ 20/mês! Saiba mais aqui.

Como usar variáveis ​​CSS

Ao usar cores específicas para permanecer na marca, um requisito comum é ter uma paleta de cores da marca que possa ser usada repetidamente. Torna-se redundante digitar o mesmo valor de cor todas as vezes. Além disso, e se você quiser fazer uma alteração em um dos valores de cor do conjunto?

Por exemplo, talvez um azul precise ser um pouco mais escuro. Isso acontece o tempo todo. Sim, claro, há o confiável localizar e substituir. Ajustar o valor em um lugar, no entanto, é mais eficiente ao fazer essa alteração global e à medida que as variáveis ​​são reutilizadas.

Aqui está a aparência de uma variável CSS :

 [css] :root { --text-black: #232525; } header { color: var(--text-black); } [/css]

Como estou simplificando o fluxo de trabalho para estilizar um tema filho do WordPress, adicionei as variáveis ​​ao meu arquivo styles.css . Esta é apenas a “lista curta” e, à medida que mais são adicionados, a nomeação eficiente de cada variável torna-se importante.

 [css] :root { --white: #ffffff; --black: #232525; --mid-gray: #eeeeee; --brand-red: #e50000; } [/css]

A função var()

Como as variáveis ​​são realmente usadas? É bem simples. Primeiro, a variável é declarada e depois usada no conjunto de regras CSS necessário.

O escopo é uma coisa importante a ser observada. As variáveis ​​precisam ser declaradas dentro de um seletor CSS que esteja dentro do escopo pretendido. Em muitos casos, você precisará que as variáveis ​​estejam disponíveis no escopo global, de forma que fiquem acessíveis a todos. Você pode usar o seletor :root ou body para o escopo global. Pode haver instâncias em que você precise limitar o escopo e desejar trabalhar com uma variável com escopo local.

É fácil identificar variáveis; eles têm dois traços antes deles. Os dois traços (–) precisam ser incluídos.

A sintaxe do var() é bastante direta:

 var(variable-name, value) [css] :root { --light-gray: #eeeeee --text-black: #434344 } .sidebar { --background-color: var(--light-gray); --color: var(--text-black); } [/css]

Em vez de ajustar a cor em vários locais, o valor da variável é ajustado em um único local.

O web inspector (Chrome neste caso) permite que você inspecione e veja quais variáveis ​​estão sendo usadas.

O exemplo a seguir define primeiro as propriedades personalizadas globais chamadas --light-gray e --text-black . A função var() é chamada, que insere o valor das propriedades personalizadas posteriormente na folha de estilo:

 [css] :root { --light-gray: #eeeeee; --text-black: #434344; } .sidebar { background-color: var(--light-gray); color: var(--text-black); } [/css]

Vale a pena mencionar que as variáveis ​​podem ser muito úteis ao trabalhar com pontos de interrupção CSS. Ao usar variáveis ​​com escopo global em diferentes pontos de interrupção, itens como preenchimento e outros estilos úteis podem ser personalizados para vários tamanhos.

 [css] :root { --gutter: 5px; } section { padding: var(--gutter); } @media (min-width: 600px) { :root { --gutter: 15px; } } [/css]

Aqui está um exemplo de variáveis ​​que podem ser encontradas no escopo local. Nós apenas tocamos no escopo global até agora, então você notará que as coisas não estão na raiz. Estes são estilos para uma mensagem de aviso. Há uma cor de texto de aviso declarada aqui que só é útil para esta classe. Além disso, vale a pena notar que calc também pode ser utilizado.

 [css] .warning { --warning-text: #ff0000; --gap: 20; color: var(--warning-text); margin-top: calc(var(--gap) * 1px); } [/css]

Os exemplos acima cobrem o básico das variáveis ​​CSS. Esses conceitos podem ser aplicados a temas personalizados do WordPress ou a qualquer outro CSS personalizado que você escrever. As variáveis ​​têm vantagens em relação ao CSS simples e ajudarão você a trabalhar com mais eficiência ao fazer alterações em todo o site. Eles permitem folhas de estilo melhor organizadas sem a necessidade de um pré-processador.

Alimente a liberdade de criar com o WP Engine

O WP Engine alimenta a liberdade de criar no WordPress. Os produtos da empresa, os mais rápidos entre todos os provedores de WordPress, alimentam 1,5 milhão de experiências digitais. Mais dos 200.000 principais sites do mundo usam o WP Engine para potencializar suas experiências digitais do que qualquer outra pessoa no WordPress. Encontre mais informações em wpengine.com ou fale com um representante hoje mesmo!