JavaScript – crossbrowser opacity mixin for .less

我试图在LESS中使用 Javascript编译在PHPstorm ..

我正在尝试创建一个基于跨浏览器实现的功能,该实现在本站发现：link

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

.crossbrowseropacity {
    /* Fallback for web browsers that doesn't support RGBa */
    background: rgb(0,0);
    /* RGBa with 0.6 opacity */
    background: rgba(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)";
}

它不会编译正确的…有人可以帮助我吗？

解决方法

假设您正在使用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.2);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ff0000,endColorstr=#33ff0000);
-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ff0000,endColorstr=#33ff0000);