Member-only story
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.
HTML
Straightforward here, note the attributes on the type="range" input. These hold our min and max values as well as our initial value. Same for type="color" input. The initial color value = #2cba92.
JAVASCRIPT
Line by line here:
- 4 — grab footer element
- 5 — grab NodeList of all inputs on the page
- 7 — input CHANGE EventListener
- 8 — input MOUSEMOVE EventListener(updates dynamic margin on slide)
- 10 — fn to set the value of the desired CSS var(note we add
pxto the margin var…
