Evitam repetição de um mesmo valor várias vezes (DRY = Do not Repeat Yourself) e facilitam sua atualização.
Permitem definir um nome para identificar certo valor a ser repetido. Esse valor pode ser uma cor, uma medida, um espaçamento, uma fonte, um gradiente, uma função, uma box-shadow, …
A declaração de uma variável é geralmente feita na pseudo-classe :root. O nome de uma variável é sempre precedido por dois traços. Exemplo:
:root {
--brand-color: #39137c;
}
Para usar (o valor de) uma variável, é preciso utilizar a função var(), que recebe como parâmetro o nome da variável desejada:
h1 {
color: var(--brand-color);
}
Um padrão comum a ser usado é mudar o valor de certas variáveis de acordo com o tamanho da tela (@media):
@media only screen and (max-width: 800px) {
:root {
--brand-color: rgb(161, 30, 197);
}
}
:rootEssa pseudo-classe é equivalente ao elemento raiz de uma árvore representando o documento.
Ela representa o elemento <html> e é idêntico ao seletor html, exceto que sua especificidade é maior.
Declarar variáveis nela garante que elas estarão disponíveis para todos os outros seletores.
Caso as variáveis não sejam declaradas na :root, seu acesso estará restrito ao escopo do seletor onde forem criadas apenas.