Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Dúvida] :root em diferentes arquivos .css

Referente ao curso HTML e CSS: praticando HTML/CSS, no capítulo A dupla HTML e CSS e atividade Criando um botão

por Henrique Ferreira Leão
| 38.2k xp | 30 posts

Fiz um outro curso aqui no Alura de "boas praticas em css" e nesse curso foi falado da importância de ter varias pastas e arquivos .css pra cada classe (para ajudar na hora da modificação de alguma coisa) , porém tentando aplicar isso nesse novo projeto me deparei com o problema de que as variáveis css acabam de tornando inúteis, já que eu teria que colocar um ":root" em todos os arquivos Style que eu fosse criando.

Queria saber se tem algum jeito de fazer "ligações entre os arquivos .css " para ter a penas 1 ":root" para todos os arquivos, ou eu desencano de fazer diferentes arquivos .css e trabalho com apenas 1 gigantesco arquivo.

Desde já muito obrigado

3 respostas
solução!
por Renan Lima
| 3530.9k xp | 7446 posts
Alura Scuba Team Apoio Educacional - Alura

Olá Henrique,

Entendo sua dúvida e realmente é importante manter uma estrutura organizada de pastas e arquivos CSS para facilitar a manutenção do código. Em relação ao uso do ":root", é possível sim fazer uma ligação entre os arquivos CSS para utilizar apenas um ":root" em todos eles.

Para fazer isso, você pode criar um arquivo chamado "variaveis.css" (ou qualquer outro nome que preferir) e nele definir todas as variáveis CSS utilizando o ":root". Em seguida, basta importar esse arquivo em todos os outros arquivos CSS que você criar utilizando o "@import".

Exemplo:

No arquivo "variaveis.css":

:root {
  --cor-primaria: #FF0000;
  --cor-secundaria: #00FF00;
}

No arquivo "estilo1.css":

@import "variaveis.css";

body {
  background-color: var(--cor-primaria);
}

No arquivo "estilo2.css":

@import "variaveis.css";

h1 {
  color: var(--cor-secundaria);
}

Dessa forma, todas as variáveis definidas no ":root" do arquivo "variaveis.css" estarão disponíveis em todos os outros arquivos CSS que você importar.

Espero ter ajudado e bons estudos!

por Henrique Ferreira Leão
| 38.2k xp | 30 posts

Nossa, muito obrigado, eu fiquei um bom tempo de manhã pesquisando pra tentar fazer isso, OBRIGADO MESMO

por Renan Lima
| 3530.9k xp | 7446 posts
Alura Scuba Team Apoio Educacional - Alura

Por nada, eu fico feliz em ajudar, valeu Henrique :)