Менее CSS: получить значение функции в JavaScript или JQuery

Question

У меня есть форма с этими входами:

<input type="text" id="@gray-base" value="#000"> 
 
<input type="text" id="@gray-darker" value="lighten(@gray-base, 13.5%)">

Как я могу получить значение цвета ввода идентификатора с @ серо- темнее? Как я могу запустить меньше funciton в браузере?

Answer 1

Смотрите также: How to update variables in .less file dynamically using AngularJS

Пример:

<form id="colorform"> 
 
<input type="text" id="gray-base" value="#000"> 
 
<input type="text" id="gray-darker" disabled value=""> 
 
<input type="submit"> 
 
</form>  
 
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 
 
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
 
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.3.1/less.min.js"></script> 
 
<script> 
 
    $('#colorform').submit(function(e) 
 
    { 
 
     less.render('s {color: lighten(' + $('#gray-base').val() + ', 13.5%);}') 
 
     .then(function(output) { 
 
      
 
      var regExp = /(#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3}))/; 
 
      var matches = regExp.exec(output.css); 
 
      var lightcolor = matches[0]; 
 
      $('#gray-darker').val(lightcolor); 
 
      $('body').css('background-color',lightcolor); 
 
     }); 
 
     e.preventDefault(); 
 
    });   
 
</script>