CODEWITHSUNDEEP
javascripthtmlcssless
Jooxa
Jooxa

Reputation: 637

LESS Css failed at calculate js variable?

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...

Upvotes: 4

Views: 1572

Answers (1)

David Hellsing
David Hellsing

Reputation: 108490

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 }

Upvotes: 5

Related Questions