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?
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.