Question

有没有办法在LESS CSS文件中使用JavaScript ..？

我目前正在做的是：

.f(@l) {
 float: @l;
}

#header {
 .f(left);
}

我想要实现的是这样的。

.f(@l) {
   // use switch or JS function to figure out what @l is and use that.
   // for example in this case it could be "l" = left - "r" = right - "n" = none(...)
 float: @l;
}

#header {
 .f(l);
}

即使我们可以将JS代码放在less.js文件中然后能够从.less文件（Source）

执行它，这也会很酷。

作为旁注，我也在这个页面上使用jQuery，如果有任何插件/黑客使用它，那些也是受欢迎的。谢谢！

Answer 1

以下是如何在简单表达式中使用三元运算符

// add extra width if @miniPlayButton is true
@extraWidth: ~`('@{miniPlayButton}' == 'true' ? 1 : 0)`;

width: 2em + unit(@extraWidth, em);

请记住常规Javascript不了解像em这样的单位，所以我觉得做这样的事情更容易（也更清晰）。

如果对类似的简单“食谱”有更好的参考，请发布。

我正在使用.NET BundleTransformer运行此服务器端。需要添加javasriptEnabled，否则会收到错误消息“语法消息：您正在使用已禁用的JavaScript。“

  <less useNativeMinification="false" ieCompat="true" strictMath="false" strictUnits="false" dumpLineNumbers="None" 
        javascriptEnabled="true" >
    <jsEngine name="MsieJsEngine" />
  </less>

Answer 2

你可以在你的lesscss文件中嵌入javascript（带反叛）细节：

http://lesscss.org/#-javascript-evaluation

编辑：如果该链接将您带到页面顶部（有时我会这样做）搜索/向下滚动到标题为“Javascript Evaluation”的部分

Answer 3

您可以将jQuery templates与dynamic stylesheets合并。

因此，在您的示例中，您可以定义类似

的内容

<script type="text/x-jquery-tmpl" id="dynstyles">
.f(${l}) {
  float: ${l};
}

#header {
  .f(left);
}
</script>
<script>
document.write(
    "<style>",
    $.template("#dynstyles").tmpl({ l: "left" }),
    "</style>");
</script>

在LESS CSS中使用JavaScript / Switch语句

3 个答案: