跨浏览器透明度mixin for .less

Question

跨浏览器透明度mixin for .less

9

我正在尝试使用Javascript在LESS中编译到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)";
}

它无法正确编译..有人可以帮我解决吗？

- CI_Guy

有任何错误信息可以帮助调试吗？ - Dave Hogan

它在第12行给出了语法错误，其中包含@ievalue：Math.floor（@alpha * 255）。toString（16）; - CI_Guy

2个回答

1

来自文档：

然而，如果你仍想在.less中使用JavaScript，可以用反引号将表达式包裹起来：

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

所以你的语句应该是这样的（我想）：

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

既然你在内部使用了一个变量，你可能需要使用字符串插值，但是你的@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})";

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

- Patrick M

我不再收到编译错误：@ievalue:Math.floor(@alpha * 255).toString(16); 但是我仍然在尝试您的两个示例时遇到了筛选器和-ms-filter行的错误。 - CI_Guy

我已经尝试了您的确切示例以及 -ms-filter: ~~"'progid:DXImageTransform.Microsoft.gradient(startColorstr=#"@ievalue+@myred+@mygreen+@myblue~~''", endColorstr=#"@ievalue+@myred+@mygreen+@myblue ~")";，但仍然存在编译问题 :( - CI_Guy

从这个例子中可以看出，这个-ms-filter确实有效：~"'progid:DXImageTransform.Microsoft.Alpha(Opacity=" @alpha*100 ~")'"。我会尝试调整它的参数。 - CI_Guy

以上都不起作用，所以我已经添加了一个赏金。这将是一个很好的功能，可以快速将IE的不透明度从十六进制颜色值转换。 - CI_Guy

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ScottS · Accepted Answer

假设你正在使用1.3.1或更高版本的LESS，那么这将实现你所需的功能（使用内置函数）：

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