我是 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" 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)
请给我一个解决方案...
最佳答案
你有两个问题。第一个:
`$.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 而不是在 LESS 中进行计算(并在窗口调整大小时使其缩放)来解决您的任务:
html,body{ height:100% }
#box{ position:absolute; top:0; bottom:100px }
关于javascript - LESS Css 计算 js 变量失败?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13764110/