LESS Css在计算js变量时失败？

我是LESS CSS的新手。当我使用html和LESS css代码时，输出会出错。LESS Css在计算js变量时失败？

请修复此问题。

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

输出是错误

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)

请给我一个解决方案...

来源

2012-12-07 Jooxa

我在所有主要的浏览器测试这个脚本并得到相同的错误。 – Jooxa

我不会混合LESS和JS。无论如何，LESS应该真正呈现并缓存在服务器端。 – Patrick

你有两个问题。第一：

`$.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 }

来源

2012-12-07 14:18:13 David

非常感谢... – Jooxa

嗨大卫！你用你的好答案解决了我的问题。 – Jooxa

LESS Css在计算js变量时失败？

回答

相关问题