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 ?

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
– longbow, Commented May 28, 2015 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
– prestarocket, Commented May 28, 2015 at 16:43
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. 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
– seven-phases-max, Commented May 28, 2015 at 18:26
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
– seven-phases-max, Commented May 28, 2015 at 18:32

Community · Accepted Answer · 2017-05-23 11:43:45Z

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>

edited May 23, 2017 at 11:43

CommunityBot

11 silver badge

answered May 29, 2015 at 9:09

Bass Jobsen

49.1k16 gold badges147 silver badges226 bronze badges

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

1 Comment

prestarocket Over a year ago

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

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related