css variables defined under :root could not be found？-CodePudding

:root{
--errorColor: #ff665d;
}
::-webkit-scrollbar-thumb {
    /* --errorColor is not defined */
    background-color: rgba(var(--errorColor), 0.8);
}

demo: https://codepen.io/ZeronoFreya/pen/VwBQarJ

What should I do?

CodePudding user response：

rgba(hexcode, 0.8) is invalid CSS. You could do the following instead;

:root{
    --errorColor: 255, 102, 93;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(var(--errorColor), 0.8);
}

Source

CodePudding user response：

Don't believe everything you read!

--errorColor is defined, but it seems that the changing of background in that pseudo element does not work unless the scrollbar is set to auto (I haven't yet found a definitive reference for this). You could test this out without use of a CSS variable, e.g. try setting with background-color: red.

However, you have another problem which is that the format for the background-color isn't going to work with that hex code color (see answer from @BernardBorg) so use an rgb setting instead.

<!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">
  <title>Document</title>
  <style>
     :root {
      --errorColor: #ff665d;
      --errorColor: 255, 102, 93;
    }
    
    div {
      width: 300px;
      height: 300px;
      border: 1px red solid;
      overflow: auto;
    }
    
    ::-webkit-scrollbar-thumb {
      background-color: rgba(var(--errorColor), 0.8);
    }
    
    ::-webkit-scrollbar {
      overflow: auto;
    }
  </style>
</head>

<body>
  <div id="div"></div>
  <script>
    let div = document.querySelector("#div")
    let str = ""
    for (let i = 0; i < 100; i  ) {
      str  = `<p>${i}</p>`
    }
    div.innerHTML = str
  </script>
</body>

</html>