using javascript calculated values in less

Question

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.

score 7 · Accepted Answer · edited Sep 24 '13 at 22:01

7

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

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

height: ~"@{winheight}px";

edited Sep 24 '13 at 22:01

Kyle Cureau

19,028
23
75
104

answered May 29 '12 at 21:29

Paul

139,544
27
275
264

I got this error in NodeJs -- JavaScript evaluation error: 'ReferenceError: $ is not defined' – Ampersanda Nov 12 '16 at 13:20
@Mochamad Lucky Prada you can only evaluate JavaScript in LESS that is compiled client-side – Paul Nov 12 '16 at 17:05
Is that means the LESS doesn't get the jQuery? – Ampersanda Nov 13 '16 at 04:44

score 1 · Answer 2 · edited Oct 15 '12 at 11:53

1

give this code and see what is you get it.

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

edited Oct 15 '12 at 11:53

gnat

6,213
108
53
73

answered May 29 '12 at 07:57

R' Zone

67
5

@Christoph : Rushi put up this answer while I was editing mine so no copying involved – HBP May 29 '12 at 08:26
my bad...feel free to edit your answer so i can remove the -1. – Christoph May 29 '12 at 08:37

score 1 · Answer 3 · answered May 29 '12 at 07:58

1

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

answered May 29 '12 at 07:58

Christoph

50,121
21
99
128

score 0 · Answer 4 · edited May 23 '17 at 12:15

0

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

edited May 23 '17 at 12:15

Community

1
1

answered May 29 '12 at 06:25

Andrius Naruševičius

8,348
7
49
78

Valli69 · Answer 5 · 2012-05-29T07:05:01.327

0

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

edited May 29 '12 at 07:05

answered May 29 '12 at 06:26

Valli69

8,856
4
23
29

this returns a string value. but it is not rendered in the browser `height: "910px"` – tiran May 29 '12 at 06:58
@tiran check my updated answer once, please let me know if is working or not – Valli69 May 29 '12 at 07:06
I got following error when I execute your code in the browser. `TypeError: Cannot read property 'defaultView' of undefined` – tiran May 29 '12 at 07:11

Matthew · Answer 6 · 2012-05-29T06:45:22.577

0

What about this:

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

edited May 29 '12 at 06:45

answered May 29 '12 at 06:26

Matthew

12,892
6
42
45

HBP · Answer 7 · 2012-05-29T07:51:59.143

0

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

Reading the docs this is a possibility.

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

edited May 29 '12 at 07:51

answered May 29 '12 at 06:29

HBP

15,685
6
28
34

this returns a string value. but it is not rendered in the browser height: "910px" – tiran May 29 '12 at 07:13
I have edited my answer after reading the docs. Can you set up a jsFiddle? – HBP May 29 '12 at 07:52

using javascript calculated values in less

7 Answers7

Linked