Até o momento não é possível definir valores da mesma forma que estamos acostumados a declarar variáveis, pelo menos não de forma cross-browser. Uma forma de simular isto é criar classes que contém as propriedades que seriam aplicadas ao elemento, como mostrado pelo Chun.
Outra alternativa é fazer o uso de pré processadores, mas aí eu estaria fugindo do tema da pergunta que é declarar valores no próprio arquivo css.
Pois bem, há um projeto na especificação com o objetivo de tornar possível a declaração de variáveis em folhas de estilos, semelhante à forma que less e sass trabalham. E a atribuição do valor ficará por conta do atributo var()
, e.g: background-color: var(--meu-bg)
.
O Firefox e o Chrome já possuem o recurso implementado, mas lembre-se que ainda é uma tecnologia em experimento. Nesse artigo da MDN há explicações mais objetivas sobre o motivo da implementação e quais problemas ela visa resolver.
Nota: No Chrome este recurso precisa ser ativado acessando a aba chrome://flags
.
Se estiver usando o Firefox, o snippet abaixo funcionará e poderá ver o uso das variáveis em ação:
:root {
--cor-links: red;
--borda: 2px solid blue;
--sombra: 0 0 10px 5px rgba(0,0,0,.5);
}
a {
color: var(--cor-links)
}
div {
border: var(--borda);
box-shadow: var(--sombra);
}
<a href='#'>Meu Link vermelho</a>
<br><br>
<div>Meu div com borda azul e sombra.</div>