Accessing and modifying CSS variables with Javascript
And why it’s better than SASS variables
Variables in SASS have been around for a while. They allow you to define a variable once at runtime and use that variable in multiple places. Coolness level 3. Coolness level 6? ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
Interacting with CSS variables with JS post-runtime.
In this demo we are going to build a simple form that will use JS to dynamically update CSS variables(in our case change color and margin of a dot)
Let’s look at the moving pieces here:
CSS
Here is some info on CSS :root, here too. From MDN:
The
:rootCSS pseudo-class matches the root element of a tree representing the document. In HTML,:rootrepresents the<html>element and is identical to the selectorhtml, except that its specificity is higher.
The CSS vars are defined in the :root and applied on lines 13–14. -- is the CSS standard for variable definition.
