CSS Studio detects the CSS variables available on an element.

We also need at least something in our CSS that can be set from outside. CSS custom properties are a great fit for this!

With JavaScript, you can actually calculate the width of the scrollbar and whether it’s visible by comparing two properties—window.innerWidth and document.body.clientWidth. If these are equal, the scrollbar isn’t visible. If these are different, we can subtract the body width from the window width to get the width of the scrollbar:const scrollbarWidth = window.innerWidth - document.body.clientWidthWe’ll want to perform this both on page load and on resize, in case someone resizes the window vertically and changes the overflow. Then, once we have the scrollbar width, we can assign it as a CSS variable:document.body.setProperty("--scrollbarWidth", `${scrollbarWidth}px`)

let root = document.documentElement; root.addEventListener("mousemove", e => { root.style.setProperty('--mouse-x', e.clientX + "px"); root.style.setProperty('--mouse-y', e.clientY + "px"); });

Here’s a CSS variable (formally called a “CSS custom property“)

A great thing about CSS variables is their reactive nature. As soon as we update them, whatever property has the value of the CSS variable gets updated as well.

The standard cascade rules also apply to the CSS Variables.So, if a custom property is declared multiple times, the lowermost definition in the css file overwrites the ones above it.

You can style a component by overriding the available CSS variables.

style.css now uses native CSS variables