在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，如果有任何使用它的插件/技巧，也欢迎您使用。谢谢！

已邀请:

3 个回复

视蕉梁拌客

您可以在此处将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>

要回复问题请先登录或注册

在LESS CSS中使用JavaScript / Switch语句

3 个回复

发起人

css

less

javascript

问题状态

在LESS CSS中使用JavaScript / Switch语句

与内容相关的链接

3 个回复

发起人

css

less

javascript

问题状态