title: Parse Javascript variable to CSS variables
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/30170/avoiding-repeated-constants-in-css">Avoiding repeated constants in CSS</a>  </p>
  </blockquote>
  
  
  
  <p>I have a javascript file that I am using to obtain the width and height of the viewport to adjust my site's resolution. I can get these values with javascript, but I don't really know where to go from here. I'd like to send the values to my CSS variables but I have not found a way to do this quickly. Is it possible? Here is my JS code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  &lt;!--
  
    var viewportwidth;
    var viewportheight;
  
   // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
  
    if (typeof window.innerWidth != 'undefined')
    {
        viewportwidth = window.innerWidth,
        viewportheight = window.innerHeight
    }
  
  
   else if (typeof document.documentElement != 'undefined'
   &amp;&amp; typeof document.documentElement.clientWidth !=
   'undefined' &amp;&amp; document.documentElement.clientWidth != 0)
   {
     viewportwidth = document.documentElement.clientWidth,
     viewportheight = document.documentElement.clientHeight
   }
  
  
   else
   {
     viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
     viewportheight = document.getElementsByTagName('body')[0].clientHeight
   }
     document.write('&lt;p&gt;Your viewport width is '+viewportwidth+'x'+viewportheight+'&lt;/p&gt;');
  //--&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>For the CSS I was hoping to get away with something quick and easy but its not working:</p>
  
  <pre><code>@variables{
  ViewWidth:'+viewportwidth+';}
  
  @variables{
  ViewHeight:'+viewportheight+';}  
  
  html{
  max-width: var(ViewWidth);
  max-height: var(ViewHeight);}
  </code></pre>
  
  <p>I am assuming that I have the incorrect syntax within the variable declarations. I wrote it that way to show that I am trying to get the variable value from JS and pass it to CSS. </p>