Entrar Ainda não tem acesso?
5
respostas

[Bug] Erro ao pegar as variáveis do root

Referente ao curso HTML e CSS: responsividade com mobile-first, no capítulo Criando Header, Flexbox e @import e atividade Customizando o Menu Hambúrguer

por Rayane Costa
| 40.5k xp | 12 posts

Gente, alguém sabe resolver esse problema? Já tentei de tudo. As variáveis declaradas no root, contendo as cores utilizadas no projeto, não aparecem no header.css. Só fica aparecendo uma cor, que é a que eu declaro na última linha do código como opção. Nem escrevendo na mão ele aceita as outras cores.

/*styles.css*/
@import url(styles/header.css);

:root {
    --cor-de-fundo: #EBECEE;
    --cor-do-cabecalho: #FFFFFF;
    --cor-lista-item: #002F52;
    --cor-lista-titulo: #EB9B00;
}

body {
    background-color: var(--cor-de-fundo);
}
/*header.css*/
.cabecalho__menu-hamburguer {
    width: 24px;
    height: 24px;
    background-image: url(../img/Menu.svg);
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
}

.cabecalho__menu-hamburguer {
    width: 24px;
    height: 24px;
    background-image: url("../img/Menu.svg");
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
}

.cabecalho {
    background-color: var(--cor-do-cabecalho);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.container {
    display: flex;
    align-items: center;
}

.container__imagem {
    padding: 1em;
}

.lista-menu {
    display: none;
    position: absolute;
    top: 100%;
}

.container__botao:checked~.lista-menu {
    display: block;
}

.lista-menu__titulo, .lista-menu__item {
    padding: 1em;
    background-color: var(--cor-do-cabecalho);    /* Quando declaro essa linha as cores declaradas no root não aparecem mais nesse arquivo como opção, nem escrevendo na mão ele aceita*/
}
<!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>AluraBooks</title>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header class="cabecalho">
        <div class="container">
            <input type="checkbox" id="menu" class="container__botao">
            <label for="menu">
                <span class="cabecalho__menu-hamburguer container__imagem"></span>
            </label>
            <ul class="lista-menu">
                <li class="lista-menu__titulo">Categorias</li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">Programação</a>
                </li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">Front-end</a>
                </li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">Infraestrutura</a>
                </li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">Business</a>
                </li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">Design & UX</a>
                </li>
            </ul>
            <img src="img/Logo.svg" alt="Logotipo da AluraBooks" class="container__imagem">
        </div>
        <div class="container">
            <a href="#"><img src="img/Favoritos.svg" alt="Ícone de meus favoritos"></a>
            <a href="#"><img src="img/Compras.svg" alt="Ícone de carrinho de compras"></a>
            <a href="#"><img src="img/Usuário.svg" alt="Ícone do perfil do usuário"></a>
        </div>
    </header>
    <main>

    </main>
    <footer>

    </footer>
</body>
</html>
5 respostas
por Rayane Costa
| 40.5k xp | 12 posts

Fui revendo todo o código e descobri que isso acontece quando eu coloco o background-color da lista-menu titulo e item. Quando eu escolho essa cor ele fica limitado, aparecendo só essa variável das que declarei no root. Mesmo escrevendo o nome da variável na mão ele não lê.

.lista-menu__titulo, .lista-menu__item {
    padding: 1em;
    background-color: var(--cor-do-cabecalho);
}
por Renan Lima
| 3653k xp | 7697 posts
Alura Scuba Team Apoio Educacional - Alura

Olá, Rayane.

Tudo bem?

No root você declarou --cor-do-cabecalho: #FFFFFF;, porém na hora de utilizar você colocou background-color: var(--cor-cabecalho); sem o do somente cor cabecalho.

Espero ter ajudado. Qualquer dúvida manda aqui de novo. Valeu.

por Rayane Costa
| 40.5k xp | 12 posts

Então, Renan, não é esse o problema. Editei a dúvida novamente pra ficar mais claro o que está acontecendo.

por Victor Rodrigues Lima Pintassilgo
| 134k xp | 7 posts

Bom dia! Tudo bem Rayane? Estou com o mesmo problema, você conseguiu resolver? Fiz o importe e tentei colocar outras cores no root, mas só aparece o branco quando eu tento colocar outra cor no header.css

/styles css/

@import url("/style/header.css");

:root {
    --cor-de-fundo: #EBECEE;
    --branco: #FFFFFF;
    --laranja: #EB9B00;
    --preto: #000000;
}

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

/header css/

.cabecalho {
    background-color: var(--branco);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.container {
    display: flex;
    align-items: center;
}

.cabecalho__menu-hamburguer {
    background-image: url("/assets/Menu.svg");
    width: 24px;
    height: 24px;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center;
}

.container__imagem {
    padding: 0.8em;
}

.lista-menu {
    display: none;
    position: absolute;
    top: 100%;
}

.container__botao:checked ~ .lista-menu {
    display: block;
}

.lista-menu__titulo, 
.lista-menu__item {
    padding: 1em;
    background-color: var(--branco);
}

.lista-menu__titulo {
    color: #EB9B00; //nessa linha quando tento colocar "color: var(--laranja)" não aparece essa cor, somente --branco
}

/html/

<!DOCTYPE html>
<html lang="en">
<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">
    <link rel="stylesheet" href="style/reset.css">
    <link rel="stylesheet" href="style/style.css">
    <title>AluraBooks</title>
</head>
<body>
    <header class="cabecalho">
        <div class="container">
            <input type="checkbox" name="" id="menu" class="container__botao">
            <label for="menu">
                <span class="cabecalho__menu-hamburguer container__imagem"></span>
            </label>
            <ul class="lista-menu">
                <li class="lista-menu__titulo">Categorias</li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">Programação</a>
                </li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">Front End</a>
                </li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">Infraestrutura</a>
                </li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">Business</a>
                </li>
                <li class="lista-menu__item">
                    <a href="#" class="lista-menu__link">Desing & UX</a>
                </li>
            </ul>
            <img src="assets/Logo.svg" alt="logo da alurabooks" class="container__imagem">
        </div>
        <div class="container">
            <a href="#"><img src="assets/Favoritos.svg" alt="meus favoritos" class="container__imagem"></a>
            <a href="#"><img src="assets/Compras.svg" alt="carrinho de compras" class="container__imagem"></a>
            <a href="#"><img src="assets/Usuário.svg" alt="meu perfil" class="container__imagem"></a>
        </div>
    </header>
</body>
</html>
por Rayane Costa
| 40.5k xp | 12 posts

Fala, Victor! Boa tarde! Aqui no meu eu reiniciei o computador e aí consegui aplicar as cores que eu queria. Mesmo não aparecendo como opção quando vc está digitando o var() vc consegue escrever e ele aplica! Espero ter ajudado!