crossbrowser opacity mixin for .less

cross-browser, css, javascript, less, phpstorm

Solution

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

Problem

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?

Original source