Less css : get value of a function in javascript or jquery

Question

i have a form with those inputs :

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

How can i get the color value of input id with @gray-darker ? How can i run less funciton in browser ?

Answer 1

See also: How to update variables in .less file dynamically using AngularJS

Example:

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