Nem todo mundo sabe, mas da para criar e usar variáveis em CSS de forma nativa. A especificação da mozilla contém um artigo muito bem explicado sobre o uso dessas variáveis.
Por que usar?
Desenvolvedores web estão sujeitos a longas horas codando. De vez em sempre nos deparamos com repitições nos blocos de estilos, como por exemplo, uma cor que se repete para classes diferentes ou o mesmo tamanho de uma fonte para diversos elementos. O problema está na hora de alterar os valores... Você vai perder muito tempo mudando várias linhas :(
Com o uso de variáveis, basta mudar o valor da cor em apenas uma linha, que se aplicará aos elementos.
Como usar
É muito simples implementar esse tipo de técnica. Basta você selecionar o seu seletor raiz (ex: html ou :root ) e escrever o nome e o valor da variável.
Atenção: Por definição deve-se começar o nome da variável com "--" (dois traços).
Ex:
html{
--cor-principal: blue;
--tamanho-texto-padrao: 16px;
}
Agora basta que no elemento que vai receber esses valores, você escreva no valor do atributo: var(--nome-da-variavel);
Ex:
.menu{
background-color: var(--cor-principal);
}
Herança
Elementos pais transmitem seus atributos para os elementos filhos.
O que eu quis dizer com isso: Se você declarar uma variável em :root ou html, essa variável estará visível em todo o documento, pois todos são filhos deles. Agora se você declarar uma variável numa section, por exemplo, todos o filhos dessa section conseguem acessar essa variável, agora o elemento footer, não vai conseguir acessar essa variável porque não foi declarada no seu escopo.
Conclusão
Mesmo que não seja tão simples quanto o SASS, as variáveis em CSS nem são tão complicadas. Se você só usa o SASS por causa das variáveis, acho que vale mais a pena Usar esse recurso nativo do CSS. Acaba tornando a aplicação mais simples até.
Fiz um exemplo de usagem de variáveis e coloquei no github.
Não esqueça de olhar a série de grid layout do blog.
Indicação de playlist: Noel Gallagher's High Flying Birds