是否在LESS（Leaner CSS）中使用Javascript评估？ [英] Is Javascript Evaluation working in LESS (Leaner CSS)?

问题描述

我使用的是LESS（ http://lesscss.org ），它说...

I am using LESS ( http://lesscss.org ) and it says ...

JavaScript评估

JavaScript表达式可以作为.less文件中的值来计算。这是通过用反向包装表达式来实现的：

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 ...

So I've tried to do this in my 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 ...

and this in styles.less ...

@height:`fred + "px"`;

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

但它只是不能工作！
也尝试了变化，如使用...

But it just won't work! Also tried variations on this such as using ...

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

如果我使用...

@height:20px;

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

It works as expected but I need to use Javascript evaluation. I would really appreciate it if someone could help - Answers focusing on answering the question and not asking why I need to use Javascript evaluation would be greatly appreciated. Thanks very much all

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

Its worth noting that if I do ...

@height:`freddd`px;

其中freddd未定义，我从较少的编译器得到一个错误 - 因此似乎知道fred被定义为。但是，目前我没有得到一个错误 - 它只是没有做任何事情，当我使用Javascript变量值。

where freddd is undefined, I get an error from the less compiler - hence it seems to know that fred is defined. However, currently I am not getting an error - it is just not doing anything when I use Javascript variable values.

推荐答案

工作在同一件事。我测试表达式的方式是在浏览器中编译较少的文件，因为你正在做（我使用firefox与firebug）。我检查我渲染的页面的头部分，并查找
< style id =less：yourLessFileName-less-stylestype =text / css> 。旋转该文件打开，你会看到编译的CSS。向下滚动，直到找到您的选择器和规则您正在使用JavaScript表达式，并查看它的呈现方式。

I am working on the same thing. The way I have been testing the expression is to compile the less file in the browser as you are doing (I am using firefox with firebug). I inspect my rendered css by inspecting the head section of the rendered page and looking for <style id="less:yourLessFileName-less-styles" type="text/css"> . Twirl that file open and you will see the compliled css. Scroll down until you find your selector and rule you are using the javascript expression for and see how it rendered.

这篇关于是否在LESS（Leaner CSS）中使用Javascript评估？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！