Estou respondendo a dúvida da Amanda Cortez Machado no tópico Dúvida :root{....}
Arquivos CSS conseguem acessar e usar o valor definido de uma variável em um outro arquivo CSS porquê houve importação pelo HTML. Exemplificando:
O arquivo "index.html" tem o seguinte código:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- Importação de arquivos CSS ->>
<link rel="stylesheet" href="variaveis.css"> <!-- Arquivo em vai as variáveis -->
<link rel="stylesheet" href="style.css"> <!-- Arquivo de estilização geral -->
</head>
<body>
<button>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut nulla amet debitis eius doloremque asperiores ipsum eum, libero modi nisi porro cupiditate. Ipsam temporibus illo, provident modi soluta atque facere!</button>
</body>
</html>Observe que foram importados dois arquivos CSS e que no conteúdo da página só há um botão. No arquivo "variaveis.css" eu defini duas variáveis que irei trabalhar com ela no decorrer do projeto. Segue o código de "variaveis.css":
:root{
--azul-forte: #2631FF;
--branco: #FFF;
}Definida as variáveis de nome "azul-forte" com o valor "#2631FF" e "branco" com o valor "#FFF" e com o arquivo dessa variável (variaveis.css) importado no HTML (index.html) eu posso usá-las em outro arquivo CSS (desde que este arquivo seja importado junto do arquivo das variáveis - assim como eu fiz no primeiro trecho de código) .
Com isso em mente, no arquivo "style.css" eu escrevi o seguinte código:
button{
background-color: var(--azul-forte);
color: var(--branco);
}E o resultado no navegador é o seguinte:
