Entrar Ainda não tem acesso?
1
resposta

Problemas para usar :root (var())

por felipe ramiro
| 99.8k xp | 1 posts

Bom dia, durante o curso de HTML foi ensinado a utilizar o emprego de variável (:root) para substituição das cores do layout. Ex.: --cor-primaria: #000000; --cor-secundaria: #F6F6F6; --cor-terciaria: #22F4FD;

Porém, o código das cores secundaria e terciaria fica com a escrita e o ponto e virgula em vermelho. Outro problema é que ao substituir os códigos das cores pelo var(): ao longo do CSS a variável não é reconhecida, além desta questão, ao realizar a inclusão da variável var(): ao longo do CSS, os espaçamentos do projeto (pagina web) deixam de existir e o titulo, paragrafos ficam sem nenhum espaçamento entre eles.

Desde já agradeço a ajuda.

1 resposta
por Renan Lima
| 4235k xp | 9015 posts
Apoio Educacional - Alura

Olá Felipe, tudo bem?

Pelo que entendi, você está tendo problemas ao utilizar a variável :root para substituição das cores do layout em seu código CSS.

Sobre a escrita e o ponto e vírgula em vermelho, isso pode ser um erro de sintaxe. Verifique se está utilizando os dois pontos (:) antes do nome da variável e se está finalizando com ponto e vírgula (;) após o valor da variável.

Já em relação ao reconhecimento da variável ao longo do CSS, verifique se você está utilizando a sintaxe correta para chamar a variável. Por exemplo, se você definiu a variável --cor-primaria, para utilizá-la em outro lugar do CSS, você deve chamar a variável utilizando var(--cor-primaria).

Sobre a questão dos espaçamentos, pode ser que você tenha alterado alguma propriedade que afetou o espaçamento do projeto. Verifique se você não alterou a propriedade margin ou padding de algum elemento.

Qualquer coisa compartilha seus códigos HTML e CSS completos aqui com a gente.

Espero ter ajudado e bons estudos!