title: Get CSS variable in JS on change, resizing, or media-quiries
body: <p>It's currently possible to get or set CSS variables from Javascript using either:</p>
  <pre class="lang-js prettyprint-override"><code>// get
  getComputedStyle(document.documentElement)
      .getPropertyValue('--variable');
  
  // set
  document.documentElement.style
      .setProperty('--variable', '500px');
  </code></pre>
  <p>But in CSS I can set the style to be this:</p>
  <pre class="lang-css prettyprint-override"><code>:root {
    --variable: &quot;1000px&quot;;
  }
  
  @media( max-width: 800px ) {
    :root {
      --variable: &quot;400px&quot;;
    }
  }
  </code></pre>
  <p>But the JS won't re-trigger if it is only run on the first load.</p>
  <p>Is there any way to make it trigger on events that the CSS would change the value?</p>
  <p>Unless the page loaded in <code>&lt; 800px</code> width, it would get the variable value as <code>1000px</code></p>