Avatar
Por .

Criado em .
Atualização: .

Você sabia que é possível criar variáveis em CSS? Algo semelhante ao o que encontramos em pré-processadores como SASS, porém agora nativo. teste

Estamos falando da CSS Custom Properties for Cascading Variables Module Level 1. Uffa, vamos chamar apenas de propriedades customizáveis ou melhor, variáveis.

Como funciona.

Segundo o editor da especificação, Atkins (2015). Este módulo apresenta variáveis ​​em cascata como um novo tipo de valor primitivo que é aceito por todas as propriedades CSS e propriedade personalizadas para defini-lás. Ou seja com esse módulo é possível criar propriedades personalizadas que posteriormente servirão como valor para as propriedades já nativas no CSS. Está com cara de WTF? Então vamos simplificar…

As variáveis em CSS funcionam como alias “apelidos”, para representar um dado valor. E essas variáveis podem ser reutilizadas em várias partes do documento, sem que você tenha que colocar o valor diretamente.

Declaração.

Para criar um váriavel basta declarar --nome-variavel: sempre com o prefixo --. Esse prefixo estipula ao CSS que estas criando um propriedade customizada. E para usar essa propriedade como um valor, utilize a função var() a frente da outra propriedade que deseja. Veja o exemplo a seguir:

Exemplo de propriedade customizável:

Efeito em cascata.

Esse recuso difere das variáveis em uma linguagem de programação, pois estar sujeita ao efeito em cascata, herdando valores do ancestral. Isso significa que se dada propriedade customizada, estiver declarada em um determinado elemento, apenas seus elementos filhos podem pegar a herança.

Exemplo de herança com um não herdeiro:

Declaração global.

Para ter as propriedade disponíveis em escopo global, pode aplicá-las diretamente no elemento raiz do documento HTML, usando a pseudo classe do CSS :root. A pseudo-class […] representa o elemento root de uma árvore, representando o documento. Aplicado ao HTML, :root representa o elemento <html>[…] (Nery, 2011).

Representação do elemento root em árvore HTML

Representação do elemento root em árvore HTML

Exemplo de propriedade customizável com herança global:

Manipulação por javascript.

As propriedades customizáveis, também são manipuláveis por javascript, que ao meu ver é uma interação muito útil, pois é possível criar uma logica de aplicação onde o usuário pode alterar diversas propriedades de diversos elementos, com poucas linhas.

Exemplo de propriedades customizáveis com Javascript:

Compatibilidade com navegadores.

Por ser um tenológica não tão antiga é bom ficar de olho na compatibilidade com os browsers. Se você deseja ter um site ou aplicativo com máximo de compartibilidade possível, não recomendo deixar seu sistema dependente apenas das propriedades customizáveis.

Gráfico de compatibilidade do modulo de proprieades customizáveis com os navegadores.

Gráfico de compatibilidade

Para mais informações pode usar os links nas referências!

Referências:

Nery, Rafael. :root – CSS, 2018. Disponível em < developer.mozilla.org/pt-BR/docs/Web/CSS/:root > Acesso em 30 de Set. de 2018.

Atkins, Tab. CSS Custom Properties for Cascading Variables Module Level 1, 2015. Disponível em < https://www.w3.org/TR/css-variables-1/ > Acesso em 30 de Set. 2018.

Torres, Filipe. var() – CSS, 2017. Disponível em < https://developer.mozilla.org/pt-BR/docs/Web/CSS/var > Acesso em 01 de Out. de 2018.

Can I use. CSS Variables (Custom Properties), 2018. Disponível em < https://caniuse.com/#feat=css-variables > Acesso em 01 de Out. de 2018.