Declarando variáveis CSS sem o uso de pré processadores.

0

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!!

 

 

Compartilhe.