CODEWITHSUNDEEP
javascriptcssless
tiran
tiran

Reputation: 2431

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.

Upvotes: 8

Views: 8208

Answers (7)

Paul
Paul

Reputation: 141839

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

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

height: ~"@{winheight}px";

Upvotes: 7

Rushi Joshi
Rushi Joshi

Reputation: 67

give this code and see what is you get it.

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

Upvotes: 1

Christoph
Christoph

Reputation: 51191

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

Upvotes: 1

HBP
HBP

Reputation: 16033

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

Reading the docs this is a possibility.

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

Upvotes: 0

Valli69
Valli69

Reputation: 9892

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

Upvotes: 0

Matthew
Matthew

Reputation: 13332

What about this:

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

Upvotes: 0

Andrius Naruševičius
Andrius Naruševičius

Reputation: 8578

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

Upvotes: 0

Related Questions