Solucionado
Boa tarde, gostaria de saber como posso aplicar o :root nesse projeto, porque assim consigo modificar as cores e as fontes quando desejar sem precisar ir em um item de cada, porém não consegui aplicar no projeto, nem no styles.css e nem no styles.scss
Oi Luis!
Para aplicar o :root no seu projeto, você pode definir variáveis CSS globais que podem ser usadas em qualquer lugar do seu arquivo CSS ou SCSS. Isso é especialmente útil para definir cores, fontes e outros valores que você pode querer reutilizar e alterar facilmente em todo o seu projeto.
No seu arquivo styles.scss, defina as variáveis dentro do seletor :root, como normalmente fazemos:
:root {
--cor-primaria: #db3434;
--segunda-cor: #2ecc71;
--font-family: 'Arial, sans-serif';
}
.linha {
border-top: 1px solid var(--cor-primaria);
width: 80%;
}
Compile o SCSS para CSS usando o botão "Watch SASS" no Visual Studio Code. Isso gerará um arquivo styles.css com as variáveis aplicadas.
Por fim,é importante verificar se o arquivo CSS compilado está sendo referenciado corretamente:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles/styles.css">
Com isso, você poderá modificar as cores e as fontes no :root e ver as mudanças refletidas em todo o seu projeto sem precisar alterar cada item individualmente.
Reforço que em casos de dúvidas, conte sempre com o fórum da comunidade Alura! Bons estudos!
Sucesso ✨
Um grande abraço e até mais!