.less 的跨浏览器不透明度混合

Question

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

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

具体来说，我正在尝试创建一个 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)";
}

它不会正确编译..有人可以帮我解决这个问题吗？

Answer 1

假设您使用的是 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);

Answer 2

来自docs：

但是，如果您仍想在 .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}..."

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

Escaping

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

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

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

我找到了this very brief example 来备份它，但同样，我还没有尝试过。