crossbrowser不透明混合 [英] crossbrowser opacity mixin for .less

问题描述

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

具体来说，我试图创建一个LESS函数来重新创建这段代码：

  .crossbrowseropacity {
 / *不支持RGBa的Web浏览器的后备* / 
 background：rgb（0，0，0）; 
 / * RGBa与0.6不透明度* / 
背景：rgba（0，0，0，0.6）; 
 / *对于IE 5.5  -  7 * / 
 filter：progid：DXImageTransform.Microsoft.gradient（startColorstr =＃99000000，endColorstr =＃99000000）; 
 / *对于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）; 
 
 / *对于IE 5.5  -  7 * / 
 
 filter：progid：DXImageTransform.Microsoft.gradient（startColorstr =＃@ ievalue + @ myred + @ mygreen + @ myblue，endColorstr = @ ievalue + @ myred + @ mygreen + @ myblue）; 
 
 / *对于IE 8 * / 
 
 -ms-filter：progid：DXImageTransform.Microsoft.gradient（startColorstr =＃@ ievalue + @ myred + @ mygreen + @ myblue，endColorstr =＃@ ievalue + @ myred + @ mygreen + @ myblue）; 
} 
  

它不会编译right..could有人可以帮我吗？ p>

解决方案

假设您使用的是LESS 1.3.1或更高版本，那么这就是您想要的（使用内置函数）：

LESS

  $ b .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}）; 
} 
 
 //使用它
 .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）; 
  

I am trying to use Javascript in LESS to be compiled in phpstorm..

I am trying to create a function based off of a cross-browser implementation of opacity found at this site : link

Specifically, I am trying to create a LESS function to recreate this piece of code:

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

This is what I have in LESS to achieve it:

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

It will not compile right..could someone help me with this?

解决方案

Assuming you are using LESS 1.3.1 or later, then this does what you want (using built in functions):

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 Output

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

这篇关于crossbrowser不透明混合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！