Использование LESS @ переменной в JavaScript

Question

Я бездельничал с помощью пользовательского HTML-модуля, который имеет следующий код

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

Я также использую .less и иметь некоторую пользовательскую переменную (@ цвет-1), который я хотел бы использовать вместо этого data-fgcolor="#555".

Я пробовал, очевидно, заменяя «# 555» на «@ color-1», который не работал. В моем script.js я также могу добавить следующее, чтобы изменить цвет:

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

Однако я ищу решение, где на каждый раз символ «@ цвет-1:» значение в моем файле .less изменяется, то вышеупомянутый «data-fgcolor» изменяется, будь то пользовательский html-модуль или через js.

Спасибо.

Answer 1

Вы не можете использовать LESS-переменные или CSS в целом для изменения атрибутов html. Если вы настаиваете на том, чтобы ваше значение fgcolor находилось в вашем LESS/CSS (а не просто в вашем скрипте), вам придется использовать обходной путь. то есть:

<!-- 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"/> 

Тогда везде, где вы используете код, который вы размещены, вы можете сделать следующее:

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