9

我正在尝试在 LESS 中使用 Javascript 在 phpstorm 中进行编译。

我正在尝试基于在此站点上找到的不透明度的跨浏览器实现来创建一个函数：链接

具体来说，我正在尝试创建一个 LESS 函数来重新创建这段代码：

.crossbrowseropacity {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0, 0, 0);
    /* RGBa with 0.6 opacity */
    background: rgba(0, 0, 0, 0.6);
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
    /* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}

这就是我在 LESS 中实现的目标：

.crossbrowser(@color,@alpha){
  @myred:red(@color);
  @mygreen:green(@color);
  @myblue:blue(@color);
  @ievalue:Math.floor(@alpha * 255).toString(16);
  background-color: @color;
  background-color: rgba(@myred,@mygreen,@myblue,@alpha);

/* For IE 5.5 - 7*/

  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#@ievalue+@myred+@mygreen+@myblue, endColorstr=#@ievalue+@myred+@mygreen+@myblue);

  /* For IE 8*/

  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#@ievalue+@myred+@mygreen+@myblue, endColorstr=#@ievalue+@myred+@mygreen+@myblue)";
}

它不会编译正确..有人可以帮我吗？

4

2 回答 2

15

假设您使用的是 LESS 1.3.1 或更高版本，那么这就是您想要的（使用内置函数）：

较少的

//define mixin
.crossbrowser(@color,@alpha){
  @rgba: rgba(red(@color),green(@color),blue(@color),@alpha);
  @argb: argb(@rgba);
  background-color: @color;
  background-color: @rgba;
  filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{argb}, endColorstr=@{argb})";
  -ms-filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{argb}, endColorstr=@{argb})";
}

//use it
.crossbrowser(red, .2);

CSS 输出

background-color: #ff0000;
background-color: rgba(255, 0, 0, 0.2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ff0000, endColorstr=#33ff0000);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ff0000, endColorstr=#33ff0000);
于 2013-03-12T19:34:19.637 回答
1

从文档：

但是，如果您仍想在 .less 中使用 JavaScript，可以通过用反引号包装表达式来完成：

@var: `"hello".toUpperCase() + '!'`;

所以你的线应该是这样的（我认为）：

@ievalue:`Math.floor(@alpha * 255).toString(16)`;

而且由于您在内部使用了变量，因此您可能需要使用string interpolation，但话又说回来，您可能不需要，因为您的 @alpha 不在字符串中。如果这不起作用，试试这个：

@ievalue:`Math.floor(@{alpha} * 255).toString(16)`;

那个看起来很有趣，我认为这是错误的。希望第一个有效。但看起来您需要在稍后执行此操作时使用插值：

"...#@ievalue+@myred+@mygreen+@myblue..."

因为您在示例代码最后一行的字符串中，所以我认为应该是：

"...#@{ievalue}+@{myred}+@{mygreen}+@{myblue}..."

至于您的最新问题，您可能需要使用另一个称为转义的位：

逃跑

有时您可能需要输出一个 CSS 值，该值要么不是有效的 CSS 语法，要么使用 LESS 无法识别的专有语法。

为了输出这样的值，我们把它放在一个以 ~ 为前缀的字符串中，例如：

.class {
  filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}

所以你的最后两行应该是这样的：

filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=#@{ievalue}+@{myred}+@{mygreen}+@{myblue}, endColorstr=#@{ievalue}+@{myred}+@{mygreen}+@{myblue})";

/* For IE 8*/

-ms-filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=#@{ievalue}+@{myred}+@{mygreen}+@{myblue}, endColorstr=#@{ievalue}+@{myred}+@{mygreen}+@{myblue})";

我找到了这个非常简短的例子来支持它，但同样，我还没有尝试过。

于 2013-03-06T20:17:25.847 回答