What I learned on this mini-project.

Like SASS, you can create variables for use throughout your stylsheet.

/* Definition */
--base: #ffc600;

/* Use */
.hl {
    color: var(--base);
}

The prefix -- is necessary.

Note - Remember, that this can be overruled by capitalising on the cascading property of CSS.

Can be used to access data attribute values given to HTML elements. These data elements must be prefixed with data-. An example is the following...

<input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">

Accessing this value is done with the following code...

const suffix = this.dataset.sizing;

• Figure out why the range slider doesn't show when using dev tools