Pass in CSS Variables through a <style> tag

The Problem

I had several custom code blocks in Squarespace, all using the same classes, just different images and different colored overlays. I wanted an easy way to pass in the overlay color.

The Solution

Pass in the css variables in the element style tag, like so:

<div style="--bgColor:blue; --textColor:white">I'm a div</div>

and use it like so:

div {
  background-color: var(--bgColor);
  color: var(--textColor);
}

Example

See the Pen Pass in css variable in style tag by Karly Nelson (@karlyanelson) on CodePen.