Variáveis CSS são entidades definidas por desenvolvedores, contendo valores específicos para serem reutilizados ao longo da folha de estilo. São configuradas usando esta notação (ex: –cor-principal: black; ) e são acessadas usando a funcão var() (ex: color: var(–cor-principal); ).
No exemplo anterior foram declaradas duas variáveis dentro do seletor :root, que é a raiz do documento, ele pegará a página toda, declarando nesse seletor as variáveis surtirão efeito na página toda.
No código foram declarado as variáveis –primarycolor e –secondarycolor em seguida no body da página eu adicionei um background com o var(–primarycolor) deixando o fundo do body da cor preta e com o texto em branco. Os parágrafos ficarão com a cor verde usando o var(–secondarycolor).
Usando nosso exemplo anterior, para usar uma variável precisará envolver o valor declarado no :root dentro da função var().
No código acima nossos links ficarão com a cor verde.
As variáveis são sensíveis a maiúscula e minúscula, as variáveis –secondarycolor e –Secondarycolor são consideradas diferentes.
Diretiva
Essa diretiva não invalida o valor da variável declarada, porém não altera o efeito cascata e nem a especificidade da regra CSS, portanto, não cumpre com sua finalidade e não deve ser usada.
Ao criar um site WordPress, uma das decisões mais importantes que você precisa tomar é…
Quando se trata de criar um site de sucesso no WordPress, otimizar o desempenho é…
If you're attending WordCamp US 2024 in person or online, I have great news! In…
Quando se trabalha como freelancer e lida com código o dia todo, é comum precisar…
A importância de se manter atualizado é essencial em todas as áreas de atuação. Profissionais…
A gig economy, também conhecida como economia dos bicos, está revolucionando a forma como as…