crossbrowser opacity mixin for .less

Question

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?

Answer 1

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

Answer 2

From the docs :

However, if you still want to use JavaScript in .less, this is done by wrapping the expression with back-ticks:

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

So your line should be this (I think):

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

And since you're using a variable inside, you might need to use string interpolation , but then again, you might not, because your @alpha isn't inside a string. If that doesn't work, give this a try:

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

That one looks funny, I think it's wrong. Hopefully the first one works. But it looks like you will need to use interpolation where you later do this:

"...#@ievalue+@myred+@mygreen+@myblue..."

Because you are inside a string on the last line of your example code, I think that should be:

"...#@{ievalue}+@{myred}+@{mygreen}+@{myblue}..."

As for your latest question, you probably need to use this other bit called Escaping:

Escaping

Sometimes you might need to output a CSS value which is either not valid CSS syntax, or uses proprietary syntax which LESS doesn't recognize.

To output such value, we place it inside a string prefixed with ~, for example:

.class {
  filter: ~"ms:alwaysHasItsOwnSyntax.For.Stuff()";
}

So your last two lines should probably be this:

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

I found this very brief example to back it up, but again, I haven't tried it.