<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}`;