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)

jsfiddle result

JSFiddle Demo

Let’s look at the moving pieces here:

CSS