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.

Kyle Cureau · Accepted Answer · 2013-09-24 22:01:18Z

7

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

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

height: ~"@{winheight}px";

edited Sep 24, 2013 at 22:01

Kyle Cureau

19.5k23 gold badges78 silver badges106 bronze badges

answered May 29, 2012 at 21:29

Paul

142k28 gold badges285 silver badges272 bronze badges

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

3 Comments

Lucky Over a year ago

I got this error in NodeJs -- JavaScript evaluation error: 'ReferenceError: $ is not defined'

Paul Over a year ago

@Mochamad Lucky Prada you can only evaluate JavaScript in LESS that is compiled client-side

Lucky Over a year ago

Is that means the LESS doesn't get the jQuery?

Christoph · Accepted Answer · 2012-05-29 07:58:57Z

1

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

answered May 29, 2012 at 7:58

Christoph

51.4k22 gold badges103 silver badges129 bronze badges

Comments

gnat · Accepted Answer · 2012-10-15 11:53:58Z

1

give this code and see what is you get it.

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

edited Oct 15, 2012 at 11:53

gnat

6,250122 gold badges57 silver badges76 bronze badges

answered May 29, 2012 at 7:57

Rushi Joshi

676 bronze badges

2 Comments

HBP Over a year ago

@Christoph : Rushi put up this answer while I was editing mine so no copying involved

Christoph Over a year ago

my bad...feel free to edit your answer so i can remove the -1.

Community · Accepted Answer · 2017-05-23 12:15:31Z

0

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

edited May 23, 2017 at 12:15

CommunityBot

11 silver badge

answered May 29, 2012 at 6:25

Andrius Naruševičius

8,6289 gold badges53 silver badges83 bronze badges

Comments

Matthew · Accepted Answer · 2012-05-29 06:45:22Z

0

What about this:

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

edited May 29, 2012 at 6:45

answered May 29, 2012 at 6:26

Matthew

13.4k6 gold badges44 silver badges45 bronze badges

Comments

Valli69 · Accepted Answer · 2012-05-29 07:05:01Z

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, 2012 at 7:05

answered May 29, 2012 at 6:26

Valli69

10k6 gold badges27 silver badges29 bronze badges

3 Comments

tiran Over a year ago

this returns a string value. but it is not rendered in the browser height: "910px"

Valli69 Over a year ago

@tiran check my updated answer once, please let me know if is working or not

tiran Over a year ago

I got following error when I execute your code in the browser. TypeError: Cannot read property 'defaultView' of undefined

HBP · Accepted Answer · 2012-05-29 07:51:59Z

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, 2012 at 7:51

answered May 29, 2012 at 6:29

HBP

16.1k6 gold badges30 silver badges34 bronze badges

2 Comments

tiran Over a year ago

this returns a string value. but it is not rendered in the browser height: "910px"

HBP Over a year ago

I have edited my answer after reading the docs. Can you set up a jsFiddle?

Collectives™ on Stack Overflow

using javascript calculated values in less

7 Answers 7

3 Comments

Comments

2 Comments

Comments

Comments

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

Comments

2 Comments

Comments

Comments

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related