using javascript calculated values in less

问题:

In LESS I used following code to get the window's height.

@winheight:`$(window).height()`

What I'm getting is a number, but when i add px there to have the unit,

height: @winheight px;

It will compile to something like height: 910 px.

I tried to have the unit after the javascript evaluation too. but I got the same result.

@winheight:`$(window).height()`px
height: @winheight;
...

height:910 px;

How can I get height:910px there (without the space between number and unit) ?

---

EDIT:

As for the first four results, it creates a string height:"910px", which doesn't render correctly.

回答1:

Simply use string interpolation and then escape from the string using ~:

@winheight:`$(window).height()`;

height: ~"@{winheight}px";

回答2:

Take .css(height) instead of .height() - this returns the value + unit.

回答3:

give this code and see what is you get it.

@winheight:0px + `$(window).height()'

回答4:

Does replacing empty space help for you? Try reading the answer of this: Replacing spaces with underscores in JavaScript?

回答5:

What about this:

@winheight:`$(window).height().toString() + "px"`

回答6:

try this

@winheight:`$(window).height()+"px"`
height: @winheight;

because .height() returns only unit-less pixel value.
alternatively use the following

@winheight:`$(window).css("height")`
    height: @winheight;

.css("height") returns a value with units

回答7:

This might work depending on LESS which I do not know well.

Reading the docs this is a possibility.

@winheight:0px + `$(window).height()`