Hoje trabalhamos com um monte de repetições em CSS. Uma única cor pode ser utilizada em vários locais, certo?
Para algumas declarações CSS, é possível declarar essa maior na cascata e deixar herança CSS resolver este problema naturalmente.
Até então, deixando claro que sou defensor de pré processadores, tudo se fazia com eles, mas como a nossa internet, está sempre evoluindo, agora é possível declarar algumas variáveis sem o uso dos mesmos.
Para projetos não-triviais, isso nem sempre é possível. Ao declarar uma variável sobre a: root pseudo-elemento, um autor CSS pode deter alguns casos de repetição usando a variável.
Tudo ainda está muito novo, e possui pequena compatibilidade, mas é algo que iremos ver crescer cada dia mais.
Veja a lista de compatibilidade aqui: http://caniuse.com/#feat=css-variables
Mãos à obra! Veja como funcionaria :
/*Create a root class:*/
:root {
}
/*Create a variable:*/
:root {
--bgd: #333;
}
/*Add names for your variable followed by a value:
(names can be any string you choose.)*/
:root {
--red: #b00;
--blue: #00b;
--fullwidth: 100%;
}
/*Set your variables anywhere in your css document:*/
h1 {
color: var(--red);
}
#MyText {
color: var(--blue);
width: var(--fullwidth);
}
Veja um exemplo funcionando aqui.
Um grande abraço a todos!
Aguardem novidades!!
