Javascript 较少的Css在计算js变量时失败？_Javascript_Html_Css_Less

Javascript 较少的Css在计算js变量时失败？

javascript html css less

Javascript 较少的Css在计算js变量时失败？,javascript,html,css,less,Javascript,Html,Css,Less,我不熟悉更少的CSS。当我使用下面的html和LESS css代码时，输出错误请解决这个问题 index.html <!DOCTYPE HTML> <html> <head> <title>LESS CSS</title> <script type="text/javascript" src="../_s/jquery.js"></script> <link rel="stylesheet/less" t

我不熟悉

更少的CSS

。当我使用下面的

html

和

LESS css

代码时，输出错误

请解决这个问题

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>

输出是错误的

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)

请给我一个解决方案…

你有两个问题。第一：

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

此代码的计算结果为

“400px”

（请注意引号

“

）。这将使CSS规则无效，因为它不使用引号。此外，

$。trim

是多余的，因为

.height（）

返回一个整数

第二个问题：

height: @clientHeight - 100;

这将获取先前创建的字符串并尝试对其执行非法的数学操作。这就是引发错误的原因

以下是您如何做到这一点：

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

最后一个代码

0px+@clientHeight

只是将

px

添加到变量中的一个技巧

您可能可以使用纯CSS来解决您的任务，而不是使用以下代码以更少的计算量（并在窗口调整大小时使其缩放）：

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

我正在所有主要浏览器上测试这个脚本，结果都是相同的错误。我不会将LESS和JS混合使用。LESS应该在服务器端进行渲染和缓存。

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