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

As variáveis ​​CSS, também conhecidas como propriedades personalizadas CSS, permitem uma fácil reutilização em suas folhas de estilo CSS. Se você já trabalhou com temas filhos do WordPress, provavelmente está fazendo muito estilo e substituindo coisas como cores, preenchimento, etc. CSS. As variáveis ​​CSS são opcionais e, à medida que você for avançando, começará a ver como as variáveis ​​o beneficiarão.

Eles não se destinam a substituir os pré-processadores CSS, sendo o mais popular o SASS. Eu uso especificamente o SASS para projetos maiores e, junto com as variáveis ​​CSS como peça central, ele oferece todas as opções avançadas. No entanto, se você já trabalhou com pré-processadores, sabe que eles precisam ser compilados para gerar o CSS. Por esse motivo, este tutorial se concentrará em Variáveis ​​CSS e não entrará em detalhes sobre pré-processadores.

Variáveis ​​CSS são um meio termo. Felizmente, há um forte suporte para navegadores. Antes de se comprometer a usá-los em produção, certifique-se de verificar Posso usar para garantir que eles tenham o suporte de que você precisa. Eles 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. Em projetos como esse, tende a haver a necessidade de fazer atualizações de estilo para criar um tema de marca. Gosto do fato de ter uma lista gerenciável de substituições de estilo e não sinto a necessidade de configurar um ambiente compilando o SASS para CSS.

Obtenha os temas Genesis Framework & StudioPress gratuitamente!

Ao hospedar seus sites no Flywheel, você terá acesso a mais de 30 temas premium do WordPress (incluindo o Genesis!) diretamente do nosso delicioso painel. São mais de $ 2.000 em valor com o qual você pode começar por apenas $ 15/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. Fica redundante digitar sempre o mesmo valor de cor. Além disso, e se você quiser fazer uma alteração em um dos valores de cor no 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 só lugar, no entanto, é mais eficiente ao fazer essa mudança global e à medida que as variáveis ​​são reutilizadas.

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

:root {
--text-black: #232525;
}

header {
color: var(--text-black);
}

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 adicionadas, nomear cada variável de forma eficiente se torna importante.

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

A função var()

Como as variáveis ​​são realmente usadas? É bem simples. Primeiro, a variável é declarada e, em seguida, é usada no conjunto de regras CSS necessário. O escopo é uma coisa importante para se estar ciente. As variáveis ​​precisam ser declaradas em um seletor CSS que esteja dentro do escopo pretendido. Em muitos casos, você precisará que as variáveis ​​estejam disponíveis no escopo global, dessa forma elas estarão acessíveis a tudo. Você pode usar o :root ou o seletor de body para o escopo global. No entanto, pode haver casos em que você precise limitar o escopo e queira 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() é bem direta:
var(variable-name, value)

:root {
--light-gray: #eeeeee
--text-black: #434344
}

.sidebar {
--background-color: var(--light-gray);
--color: var(--text-black);
}

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

O web inspector (Chrome neste caso) permite inspecionar e ver quais variáveis ​​estão sendo usadas.

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

:root {
--light-gray: #eeeeee;
--text-black: #434344;
}

.sidebar {
background-color: var(--light-gray);
color: var(--text-black);
}

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

:root {
--gutter: 5px;
}

section {
padding: var(--gutter);
}

@media (min-width: 600px) {
:root {
--gutter: 15px;
}
}

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 o calc também pode ser utilizado.

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

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 o ajudarão 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.

O que vem a seguir: Plug-ins

Baixe este e-book para obter uma lista dos nossos plugins mais recomendados para desenvolvedores! Descobrimos que todos esses plug-ins são fáceis de usar, não têm um desempenho muito pesado em seu site e são totalmente confiáveis.

Gostou deste artigo? Tente um destes:

• Como criar um layout de cartão usando CSS Grid Layout
• Como combinar grades Flexbox e CSS para layouts eficientes
• Personalizações simples para o seu tema filho Genesis