Home/ Questions/Q 8952685
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T13:55:44+00:00

I’m new to LESS CSS . When I use below html and LESS css

  • 0

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…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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 }
    • 0