crossbrowser opacity mixin for .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)";
}

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

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