title: Passing LESS variable to JavaScript
body: <p>I have a LESS file that has some variables:</p>
  
  <pre><code>@font-size: 100%;
  @label-align: left;
  @field-width: 230px;
  @icon-size: 16px;
  @icon-padding: 8px;
  </code></pre>
  
  <p>In my JS script I need to know the sum of some initial values the user has set in the LESS file. The computed css values might change according to parent container size. Those values also change on first load, depending on the window size. </p>
  
  <p>Some elements are also dynamically created so it makes it really hard to grab the correct initial values in JS because I would have to declare variables at different points in the code and in different scopes. </p>
  
  <p>One idea I had is to declare a "high scope" object with some dummy variables and assign the value to the variable as soon as I append to element to the DOM but it turned out to be messy and redundant.</p>
  
  <p>After many hours I came up with this idea that currently works, kinda hacky but works. </p>
  
  <p><strong>LESS:</strong></p>
  
  <pre><code>.less-vars {
      width: @field-width + @error-width + @icon-size + (@icon-padding * 2);
  }
  </code></pre>
  
  <p><strong>JS</strong>:</p>
  
  <pre><code>var less_vars = $('&lt;div class="less-vars" /&gt;').hide().appendTo('body').width();
  $('.less-vars').remove();
  </code></pre>
  
  <p>Is there any other way I can do this?</p>