title: Using a LESS @ variable in javascript
body: <p>I am messing around with a custom html module which has the following code</p>
  
  <pre><code>&lt;div id="circle1" class="circle-stat chart circliful" data-fill="transparent" data-bgcolor="#333" data-fgcolor="#555" data-percent="85" data-fontsize="38" data-width="20" data-text="85%" data-dimension="200" style="width: 200px;"&gt;
  </code></pre>
  
  <p>I am also using .less and have some custom variable (@color-1) which I would like to use instead with the <code>data-fgcolor="#555"</code>. </p>
  
  <p>I have tried obviously replacing "#555" with "@color-1" which did not work. In my script.js I can also add the following to change the color:</p>
  
  <pre><code>jQuery(function($){
    $('.circle-stat').attr("data-fgcolor", "#555");
    $('.circle-stat').circliful();
  });
  </code></pre>
  
  <p>However I am looking for a solution where by everytime the '@color-1:' value in my .less file is changed then the above 'data-fgcolor' is changed whether by the custom html module or through js.</p>
  
  <p>Thanks.</p>