javascript - Javascript 评估是否在 LESS(精简 CSS)中工作？

Question

我正在使用 LESS ( http://lesscss.org )，它说 ...

JavaScript evaluation

JavaScript expressions can be evaluated as values inside .less files. This is done by wrapping the expression with back-ticks:

提供的示例是...

@height: `document.body.clientHeight`;

所以我尝试在我的 html 中这样做......

<script type="text/javascript">
    var fred=5;
</script>
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script type="text/javascript" src="http://lesscss.googlecode.com/files/less-1.2.1.min.js"></script>     

这在 styles.less ...

@height:`fred + "px"`;

.mydiv {
    background-color:green;
    height:@height;
}

但这根本行不通!还尝试了对此的变体，例如使用 ...

@height:`fred`px;
@height:`fred`;

如果我使用...

@height:20px;

它按预期工作，但我需要使用 Javascript 评估。如果有人可以提供帮助，我将不胜感激 - 非常感谢专注于回答问题而不是问为什么我需要使用 Javascript 评估的答案。非常感谢大家

值得注意的是，如果我这样做......

@height:`freddd`px;

在 freddd 未定义的地方，我从 less 编译器中得到一个错误 - 因此它似乎知道 fred 已定义。但是，目前我没有收到错误 - 当我使用 Javascript 变量值时它什么也没做。

Answer 1

我正在做同样的事情。我一直在测试表达式的方法是像您一样在浏览器中编译 less 文件(我正在使用带有 firebug 的 firefox)。我通过检查呈现页面的头部部分并寻找来检查我呈现的 css <style id="less:yourLessFileName-less-styles" type="text/css"> .打开该文件，您将看到已编译的 css。向下滚动，直到找到您正在使用 javascript 表达式的选择器和规则，然后查看它是如何呈现的。