LESS Css failed at calculate js variable?

Question

I'm new to `LESS CSS`. When I use below `html` and `LESS css` codes the output comes error. Please fix this problem. index.html ``` LESS CSS

``` test.less ``` @color : #2AA4CF; @clientHeight: ~`$.trim( $(window).height() ) + 'px'`; #box { position: absolute; background-color: darken(@color, 10%); width: 300px; height: @clientHeight - 100; } ``` Output is Error ``` Object # has no method 'operate' in test.less at e.Operation.eval (http://localhost/frames/006/less.js:9:11151) at Object.e.Expression.eval (http://localhost/frames/006/less.js:9:3533) at Object.e.Value.eval (http://localhost/frames/006/less.js:9:18173) at e.Rule.eval (http://localhost/frames/006/less.js:9:12727) at Object.e.Ruleset.eval (http://local…

Accepted Answer

You have two problems. The first:

```
`$.trim( $(window).height() ) + 'px'`
```

This code evaluates to `"400px"` (note the quotes `"`). This will make the CSS rule invalid, as it doesn’t use quotes. Also, `$.trim` is redundant since `.height()` returns an integer.

The second problem:

```
height: @clientHeight - 100;
```

This will take the previously created string and try to perform an illegal math operation to it. This is what throws the error.

Here is how you can do it:

```
@color : #2AA4CF;
@clientHeight: `$(window).height()-100`;
#box
{
    position: absolute;
    background-color: darken(@color, 10%);
    width: 300px;
    height: 0px + @clientHeight
}
```

The last code `0px + @clientHeight` is just a trick to add `px` to the variable.

You can probably solve your task using pure CSS instead of calculating in LESS (and also make it scale when the window resizes) using the following code:

```
html,body{ height:100% }
#box{ position:absolute; top:0; bottom:100px }
```

LESS Css failed at calculate js variable?

Solution

Problem