This is simple CSS variables benchmark generator. It generates n colored squares in two flavors, one with classic CSS and other using CSS variables.

Note: colors are reused once for better benchmarking.

Clone and:

yarn 
yarn start [number of colors] [reuse factor]

You should get two files in bundle directory.

• dynamic.html
• static.html

Now use your browser` tools to benchmark which runs faster.

You can use VSC Go Live plugin to run it in browser.

Or...

You can install http-server

npm install -g http-server
cd bundle
http-server ./

You can build this repo to run it faster:

yarn build
node dist/index.js -- 666 4

5000 colors, reused once. Guest profile, no browser add-ons at all.

Linux 
Google Chrome Version 92.0.4515.159 (Official Build) (64-bit)

As you can see using CSS variables on 10 000 elements is 0.7% slower than raw CSS.

This is very simple usage case. You might want to create your own more advanced benchmarks. Feel free to fork this code.