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
:root
CSS pseudo-class matches the root element of a tree representing the document. In HTML,:root
represents 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.