<main></main>
:root {
  --one: 1;
  --two: 2;
}
function getCSSVariable(varName) {
  return getComputedStyle(document.documentElement)
    .getPropertyValue(varName);
}

const one = getCSSVariable('--one');
const two = getCSSVariable('--two');
const three = Number(one) + Number(two);

document.querySelector('main').textContent = `${one} + ${two} = ${three}`;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.