LESSCSS method with IE FIlter Alpha Opacity CSS

Question

I am using LESSCSS. I\'m trying to create a method for opacity:

.opacity (@opacity) 
{
    opacity: @opacity;
    -ms-filter: \"progid:DXImageTransform.Microsof         


        

Answer 1

You need to prefix the string with ~, like so:

-ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=50)";

From the docs: Escaping

UPDATE: you need to wrap the variable names in curly braces.

.opacity (@opacity) {
    opacity: @opacity;
    -ms-filter: ~`"progid:DXImageTransform.Microsoft.Alpha(opacity=(" + "@{opacity}" * 100 + "))"`; 
    filter: ~`"alpha(opacity = (" + "@{opacity}" * 100 + "))"`;
}

Here's what's happening: after the prefix, wrap the entire expression in backticks so that it is evaluated as JavaScript. Then you can add the result of the multiplication to the rest of the string; you also need to wrap the LESS variable in quotes and curly braces so the compiler can evaluate it before the multiplication.

This has been a cool question; I didn't actually know LESS could do this.