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

<!DOCTYPE HTML>
<html>
<head>
<title>LESS CSS</title>
<script type="text/javascript" src="../_s/jquery.js"></script>
<link rel="stylesheet/less" type="text/css" href="test.less" />
<script src="less.js" type="text/javascript"></script>
</head>
<body>

<div id="box"></div>

</body>
</html>

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://localhost/frames/006/less.js:9:13904)
at Object.e.Ruleset.eval (http://localhost/frames/006/less.js:9:13904)
at Object.toCSS (http://localhost/frames/006/less.js:8:10291)
at http://localhost/frames/006/less.js:9:20740
at http://localhost/frames/006/less.js:8:1157
at Object.p.parse (http://localhost/frames/006/less.js:8:10899)

Please give me a solution...

I'm testing this script at all major browsers and get same error. — Jooxa
– Jooxa, Commented Dec 7, 2012 at 13:49
I wouldn't mix LESS and JS. LESS should really be rendered and cached server side anyway. — Patrick
– Patrick, Commented Dec 7, 2012 at 14:25

David Hellsing · Accepted Answer · 2012-12-07 14:18:13Z

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 }

Collectives™ on Stack Overflow

LESS Css failed at calculate js variable?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related