1

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 ?

prestarocket
  • 733
  • 3
  • 12
  • 30
  • why do you want it to be in .less other than set it on the fly with jquery.css? just to circumvent inline styling? – longbow May 28 '15 at 14:12
  • i m working on a tool that allow to modify less file... I have this less value and i need to display the result of this less function – prestarocket May 28 '15 at 16:43
  • 1
    You will have to create a valid less code from this stuff, then pass this code to the compiler and then retrieve an evaluated value of the variable with something like [this](https://github.com/less/less.js/issues/2597). Pretty compicated (not counting that the browser version of the compiler currently does not support plugins so you'll need more hacks), so I'd rather give this feature up and/or rethink our app architecture... (Basically Less is not meant for such kind of dynamic browser based value manipulations/use-cases... It's primarily a static Less to CSS compiler). – seven-phases-max May 28 '15 at 18:26
  • 1
    Alternatively you can retrieve the value of a variable by assigning it to some property (`content` for example) of an auxiliary CSS class and then reading the property by your script as usually. – seven-phases-max May 28 '15 at 18:32

1 Answers1

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>
Community
  • 1
  • 1
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
  • i have also var with font size value, line height etc... I found a solution : i write css rules with pseudo element (::after) and i add the value of the less variable as content – prestarocket May 29 '15 at 12:53