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

这就是我在实现它时所拥有的：

.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或更高版本，那么这可以满足您的需求（使用内置函数）：

<强> LESS

//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，可以通过使用back-ticks包装表达式来完成：

@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值，该值不是有效的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})";

我发现this very brief example支持它，但是我还没有尝试过。

跨浏览器opacity mixin for .less

2 个答案: