Is it possible to call a JavaScript function with a Less variable from Less CSS?

Question

I have to call a JavaScript function from the less CSS for customization purpose. The function needs to pass the less variable from Less file to JS. is it possible to do it? using backtick can get JS variable in a Less file but I don't know how to call a JS function from less?

demo.js

function getGradient(colorlist, dark, light){
   // some large customization
}

demo.less

@color: #ffffff,#000000,#cccccc;
@light: 20%;
@dark: 50%;
@gradient : ~`getGradient(@{color}, @{light}, @{dark})`;

The above code is not working. Please let me know is it possible to access a JS function from Less?

@knitevision He's not talking about using built in less functions but creating his own custom ones. He can do that with backticks. — Don Rhummy
– Don Rhummy, Commented Sep 17, 2015 at 2:28
Thanks for your reply. Can I call the js fuction name directly in less file which function placed in a javascript file? — Son04
– Son04, Commented Sep 17, 2015 at 3:29
Well, in short (it's actually too many possible solutions): obviously the less compiler can't see your function in demo.js (how can it know that function is there and should be used at all?). You could try something like either @plugin or less-plugin-funtions or a sort of. Though to be honest I start to suspect this to be another akward XY-problem (I can't see any need for JS-based "some large customization" for whatever complex kind of gradient or whatever color lists in general.) — seven-phases-max
– seven-phases-max, Commented Sep 18, 2015 at 11:53
stackoverflow.com/questions/61328297/… same doubt i have anyone answer this? — Mike Mohan
– Mike Mohan, Commented Apr 21, 2020 at 16:55

Don Rhummy · Accepted Answer · 2015-09-17 02:26:43Z

3

You can embed javascript in lesscss files with backticks.

For example:

@myObject: `function(){

    var myObject = {
        getSomething: function() {
            return( "This is yo' content!" );
        }
    };

    return( myObject );

}`;

Notice the backticks (not single quotes).

answered Sep 17, 2015 at 2:26

Don Rhummy

26.1k53 gold badges197 silver badges364 bronze badges

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

2 Comments

Son04 Over a year ago

Thanks for your reply. Can I call the javascript fuction name directly in less file like in my code snippet? @gradient : ~getGradient(@{color}, @{light}, @{dark}); The js function is placed in a separate js file. also can I pass some less variable in the javascript function?

Don Rhummy Over a year ago

@Aji04 This will explain it better: bennadel.com/blog/…

Collectives™ on Stack Overflow

Is it possible to call a JavaScript function with a Less variable from Less CSS?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related