Variáveis ​​CSS em CSS puro – Começando em 5 minutos ou menos

Variáveis ​​CSS (ou oficialmente: propriedades personalizadas ) em CSS puro são uma grande economia de tempo para qualquer pessoa disposta a investir cinco minutos para aprender a usá-las. Eles existem desde o CSS3 e 92% de todos os usuários têm navegadores que os suportam. O uso de variáveis ​​CSS não requer nenhuma alteração significativa nas folhas de estilo existentes ou novas ferramentas e pode ser facilmente aplicado a projetos antigos. Em vez de ter um código de cor hexadecimal escrito em centenas de lugares em um arquivo, você pode defini-lo em apenas um lugar – com uma variável CSS. Uma grande economia de tempo e ajuda a tornar as folhas de estilo mais consistentes.

Espere, então isso é Saas or Less, certo?

Não, estamos falando de CSS puro aqui, não CSS acoplado a um pré-processador como Saas, Less ou SCSS. O uso de variáveis ​​CSS não requer ferramentas, editores ou alterações adicionais em seu fluxo de trabalho ou qualquer outra coisa que você use. Portanto, arquivos CSS existentes sem variáveis ​​não requerem nenhuma alteração “especial”, e você pode misturar e combinar – use variáveis ​​apenas para partes do arquivo, ou apenas em alguns arquivos do seu projeto.

Pré-processadores CSS como Saas ou Less também suportam variáveis. Além disso, eles têm muito mais funções e opções que você pode usar. No entanto, como o nome sugere, eles exigem um pré-processador – uma ferramenta que converte CSS escrito em Saas em CSS puro. Se você só precisa de variáveis ​​– CSS puro tem tudo que você precisa.

Variáveis ​​CSS são uma função nativa, e é isso que as torna ótimas. Com esforço mínimo, suas folhas de estilo são muito mais legíveis e consistentes. Além disso, quaisquer alterações que você precise fazer posteriormente são muito mais fáceis de fazer – certamente mais rápidas do que pesquisar e substituir quando você precisa alterar um código de cor em centenas de lugares .

Vamos criar algumas variáveis

Como em qualquer linguagem de programação, existem duas etapas para usar variáveis : dar-lhes valor (definindo-as) e usá-las (colocando-as em todos os lugares onde você precisa desse valor). Faremos o mesmo;

:root {
  --my-red: #ff0080;
  --my-shadow: 3px 3px 10px green;
  --my-border: 1px solid #222222;
}

.custom-box {
  box-shadow: var(--my-shadow);
}

.custom-text {
  color: var(--my-red);
  border: var(--my-border);
}

Se você quiser usar uma variável globalmente (em qualquer lugar) no arquivo CSS, você deve defini-la na pseudo-classe :root . A localização no arquivo não importa. Pode estar no início ou no final do arquivo. Mas, você tem que colocar a variável em :root . O nome deve começar com um traço duplo -- e não pode conter espaços. As variáveis ​​CSS podem conter qualquer valor que você normalmente atribui a uma propriedade CSS; desde valores simples, como cores, até expressões complexas para propriedades abreviadas, como o plano de fundo ou a sombra.

Para usar uma variável (para obter seu valor) coloque-a na função var() . Não esqueça que todos os nomes de variáveis ​​começam com -- . Isso é tudo que você precisa saber para começar.

Como usar valores de fallback

Caso uma variável não seja definida, um valor de fallback pode ser fornecido para a função var() como o segundo parâmetro.

:root {
  --my-red: #ff0080;
  --my-blue: #0020ff;
  --my-shadow: 3px 3px 10px green;
}

.custom-box {
  box-shadow: var(--my-shadow, 2px 2px 5px blue);
}

.custom-text {
  color: var(--my-red, var(--my-blue, red));
}

Não se preocupe se o valor da propriedade for complexo. O parâmetro de fallback permite vírgulas (veja o exemplo box-shadow ). Ele também permite o encadeamento de várias funções var() conforme mostrado para cor em .custom-text . Se --my-red e --my-blue forem indefinidas, o vermelho será usado como cor.

Combinar var() e calc() também funciona, sem surpresas na sintaxe. Aqui está um exemplo que inclui uma variável local que está disponível apenas na classe em que foi definida.

.box {
  --padding: 10px;
  
  height: calc(var(--padding) + 100px);
  padding: var(--padding);
}

Use calc() com moderação. Não é uma coisa ruim, mas quando usado em excesso fica bastante problemático para depurar e manter.

Obtendo e configurando variáveis ​​CSS via JavaScript

Usando JavaScript simples, você pode definir novas variáveis ​​CSS e acessar seus valores. Eu não uso este método. Em vez disso, prefiro alterar a classe do elemento. No entanto, não há nada de errado se você quiser acessar variáveis ​​CSS via JavaScript. É certamente utilizável em algumas situações. Aqueles que aderem ao jQuery, podem converter o código em um plugin jQuery.

Para criar uma nova variável ou alterar o valor de uma existente, use:

// set var value
document.documentElement.style.setProperty('--my-var', 'blue');

Acessar uma variável é um pouco mais complexo. Se a variável for definida via JS, use:

// get var value if defined via JS
document.documentElement.style.getPropertyValue('--my-var');

No entanto, se for definido via CSS (e geralmente será), use este código:

// get var value if defined via CSS
getComputedStyle(document.documentElement,null).getPropertyValue('--my-var');

Problemas e coisas a serem observadas

Agora que você sabe como usar variáveis, não exagere com elas e crie uma variável para cada valor de propriedade na folha de estilo. Por exemplo, isso seria exagero e abuso de todo o conceito;

:root {
  --spacing-10: 10px;
}

.custom-box {
  padding: var(--spacing-10);
}

Você não conseguiu nada. Acabei de obter --spacing-10 em vez de 10px . Em breve, você acabará criando mais vinte variáveis ​​para cada valor de pixel de preenchimento de 5px a 100px. Se você está buscando consistência, use um conceito de --small-padding, --medium-padding, --large-padding e atribua valores numéricos apropriados.

Embora não seja exigido pelo padrão CSS, sugiro de todo o coração definir todas as variáveis ​​em um só lugar e no início do arquivo CSS . Dessa forma, você sempre saberá onde eles estão e poderá alterar os valores rapidamente. Se você espalhar definições por todo o arquivo, terá dificuldade em rastrear as coisas e poderá acabar definindo a mesma variável em vários lugares. Depurar isso não será uma tarefa divertida.

Não há razão para não usar variáveis ​​CSS

Na Internet, as coisas avançam rapidamente (como cookies sendo substituídos por armazenamento local). Para grandes projetos e grandes equipes, mudar para pré-processadores CSS como o Saas é o caminho certo a seguir. No entanto, para projetos menores ou projetos existentes que requerem manutenção, as variáveis ​​CSS em CSS puro são a solução certa . Eles não exigem absolutamente nenhuma alteração, atualização de software ou ferramenta ou qualquer coisa. Você define uma variável e começa a usá-la.