-1

Estou definindo variáveis css para melhorar meus projetos, e encontrei uma situação que achei que não aconteceria usando essa técnica:
Quando redefino o valor de uma variável dentro da cascata css o valor utilizado segue sendo o definido inicialmente em :root.
Considere o código CSS abaixo:

:root {
    --bsize: 1px;
    --bstyle: solid;
    --bcolor: currentcolor;
    --bpadrao: var(--bsize) var(--bstyle) var(--bcolor);
}
.lista-beneficios li {
    --bcolor: #bfc9cf;
    border-bottom: var(--bpadrao);
}

Conside o código HTML abaixo:

<ul class="lista-beneficios">
    <li>Benefício 1</li>
    <li>Benefício 2</li>
    <li>Benefício 3</li>
    <li>Benefício 4</li>
    <li>Benefício 5</li>
</ul>

Tentei definir também como <li style="--bcolor: #bfc9cf;"> Benefício 1 </li> porém não houve efeito, além de que seria inviável aplicar, primeiro porque a cor é proveniente de uma variável LESS, e segundo por conta de todas as páginas de benefício que possuo.

O resultado segue igual considerando currentColor definido em :root, conforme imagem linkada abaixo:
Imagem do inspetor com resultado como currentColor mesmo com definição de novos valores

Alguém poderia me dar uma luz?

3
  • 1
    Boas vindas. É erro de uso developer.mozilla.org/en-US/docs/Web/CSS/…. Sobre as variaveis, também é uso errado, elas possuem escopo, como explicado em: pt.stackoverflow.com/q/582657/3635
    – Syzoth
    Commented 6/06 às 20:45
  • @Syzoth A resposta que você aponta é boa, mas fala mais sobre especificidade na cascata do que de escopo de variáveis. Aqui o problema (fora o erro de sintaxe e de contexto de uso do currentcolor) é de escopo mesmo. Temos duas custom properties interdependentes, e quando uma delas é modificada em um escopo mais interno, a outra continua acessando a versão da primeira existente no escopo mais externo.
    – bfavaretto
    Commented 6/06 às 22:01
  • 1
    A dúvida mesmo era por questões de praticidade, sou novo nesse uso de variáveis e estou tentando explorar ao máximo as possibilidades de agilizar minhas manutenções, isso acabou me fazendo esquecer do escopo. Obrigado a todos. A minha resposta pro caso funciona mas não me parece muito prática se tiver muitas variáveis com o mesmo princípio. Obrigado a todos!
    – Barth
    Commented 7/06 às 14:04

1 Resposta 1

3

Antes de mais nada: você está usando currentColor em vez de currentcolor. Se estivesse usando corretamente e alterado o valor de color em .lista-beneficios li, nem teria caído no problema que gerou sua pergunta, pois o comportamento de currentcolor é justamente assumir o valor de color do elemento.

As variáveis têm escopo

Quando você redefine --bcolor no escopo mais interno, essa redefinição só vale nesse escopo, não no escopo global (:root). E --bpadrao, que faz referência a --bcolor, só existe no escopo global e permance inalterado. O --bpadrao precisaria também ser recomputado dentro de .lista-beneficios li – o que nesse seu exemplo parece mais fácil fazer sem variáveis.

1
  • 1
    Entendi! Muito obrigado pela sua resposta! Considerando essa informação eu apliquei a definição de --bpadrao para dentro de .page * { --bpadrao:...;} e funcionou como deveria sem precisar mudar mais nada; Sem seu esclarecimento não chegaria nessa solução.
    – Barth
    Commented 6/06 às 18:09

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .