Geek Answers Handbook

LESS css failed to calculate js variable?

I am new to LESS CSS . When I use the codes below html and LESS CSS , an error appears on the output.

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; }

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

+4
source share
1 answer

You have two problems. First:

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

This code evaluates to "400px" (note the quotation marks " ). This will invalidate the CSS rule because it does not use quotation marks. Also, $.trim is redundant because .height() returns an integer.

The second problem:

 height: @clientHeight - 100;

This will take a previously created line and try to perform an illegal mathematical operation on it. This is what throws an error.

Here's 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 latest code 0px + @clientHeight is just a trick for adding px to a variable.

You can probably solve your problem using pure CSS instead of calculating in LESS (and also make scaling when changing the window size) with the following code:

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

More articles:


All Articles