在LESS CSS中使用JavaScript / Switch语句

问题描述

| 是否可以在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文件执行它，这也很酷（源代码） 附带一提，我也在此页面上使用了jQuery，如果有任何使用它的插件/技巧，也欢迎您使用。谢谢！     

解决方法

        您可以在此处将javascript嵌入到lesscss文件中（带有反引号）： http://lesscss.org/#-javascript-evaluation 编辑：如果该链接将您带到页面顶部（有时对我而言如此），则搜索/向下滚动到标题为“ Javascript评估”的部分     ,        这是在简单表达式中使用三元运算符的方法

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

    ,        您可以将jQuery模板与动态样式表结合使用吗？ 因此，在您的示例中，您可以定义类似

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