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