Using a LESS @ variable in javascript

Question

I am messing around with a custom html module which has the following code

<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;">

I am also using .less and have some custom variable (@color-1) which I would like to use instead with the data-fgcolor="#555".

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:

jQuery(function($){
  $('.circle-stat').attr("data-fgcolor", "#555");
  $('.circle-stat').circliful();
});

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.

Thanks.

While it's possible to retrieve a Less variable within a JS script, it's more easy and efficient to do the opposite instead. Define your color in JS and pass it to Less via modifyVars. — seven-phases-max
– seven-phases-max, Commented Feb 4, 2016 at 22:14

matmo · Accepted Answer · 2016-02-04 22:25:32Z

1

You can't use LESS variables, or CSS in general, to modify html attributes. If you insist on having your fgcolor value reside in your LESS/CSS (as opposed to just being in your script), you're going to have to use a workaround. i.e:

<!-- this style will go in your less file -->
<style>
   .fgColorHere {
      color: @yourColorVariableGoesHere; // your desired color goes here
   }
</style>

<!-- you can just stick this element anywhere in the DOM -->
<!-- apply your color to this hidden element so we can grab the color value -->
<div id="workaroundElement" style="display: none" class="fgColorHere"/>

Then, wherever you're using the code you posted, you can do the following:

jQuery(function($){
   var colorVal = $("#workaroundElement").css("color");
   $('.circle-stat').attr("data-fgcolor", colorVal);
   $('.circle-stat').circliful();
});

edited Feb 4, 2016 at 22:25

answered Feb 4, 2016 at 22:13

matmo

1,39912 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using a LESS @ variable in javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related