在 LESS CSS 中使用 JavaScript/Switch 语句

发布于 2024-11-15 13:06:39 字数 597 浏览 1 评论 0原文

有没有办法在 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，如果有任何插件/黑客使用它，这些是也欢迎。谢谢！

原文

Is there a way to use JavaScript inside a LESS CSS file..?

What I am currently doing is this :

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

#header {
 .f(left);
}

What I am trying to achieve is something like this.

.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);
}

It would be cool even if we could put JS code in the less.js file and then be able to execute it from the .less file (Source)

As a sidenote, I use jQuery on this page as well, if there are any plugins/hacks using it, those are welcome as well. Thanks!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

知你几分 2024-11-22 13:06:39

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

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

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

请记住，常规 Javascript 不知道像 em 这样的单位，所以我发现做这样的事情更容易（也更清晰）。

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

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

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

Here's how you can use ternary operator in a simple expression

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

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

Remember regular Javascript doesn't know about units like em so I find it easier (and clearer) to do something like this.

If there is a better reference for similar simple 'recipes' please post it.

I am running this server side with .NET BundleTransformer. Needed to add javasriptEnabled or else you get the error message "Syntax
Message: You are using JavaScript, which has been disabled."

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

回复收藏 0 原文

彩扇题诗 2024-11-22 13:06:39

您可以在此处的 lesscss 文件中嵌入 javascript（带反引号）详细信息：

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

编辑：如果该链接将您带到页面顶部（有时对我来说就是这样），则搜索/向下滚动到标题为“Javascript评估”的部分

回复收藏 0 原文

单挑你×的.吻 2024-11-22 13:06:39

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

Can you combine jQuery templates with dynamic stylesheets.

So in your example you could define something like

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

回复收藏 0 原文

~没有更多了~