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.Microsoft.Alpha(opacity=(@opacity * 100))"; 
    filter: alpha(opacity = (@opacity * 100));
}

So, If I call it using:

h1 {
  .opacity(.5);
}

I want it to output:

h1 {
  opacity: .5;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=50)";
  filter: alpha(opacity = 50);
}

But instead, LESS throws the error:

Expected '}' on line 30 in file '/Content/styles/style.less.css':
 [29]:     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=(@opacity * 100))"; 
 [30]:     filter: alpha(opacity = (@opacity * 100));
       ----^
 [31]: }

What am I doing wrong?

Answer 1

In dotless, do this. (I would NOT recommend script tags - they are ugly, language specific and not supported by dotless).

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

in dotless 1.2.3 (when it is released in a couple of weeks, or github head, you should be able to do this...

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

and re: the comment from Mathletics, dotless is not "the worst compiler".. It matches less.js up to 1.1.5, soon to be 1.2.2 and many of the 600 bugs against less.js are fixed in dotless. You may have used dotless over 8 months ago, but things change and bugs are fixed... dotless also has better support for comments and variable scoping.

Answer 2

There is nice solution I found in internet - LESS CSS class for cross browser opacity:

.opacity(@opacity) {

     @ieOpacity: @opacity * 100;
     -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(Opacity=@{ieOpacity})"; // IE 8
     filter: ~"alpha(opacity=@{ieOpacity})"; // IE 5-7
     opacity: @opacity;
}

Answer 3

naaa .. this one worked for me:

.opacity(@a:0.5){
    zoom:1;
    opacity: @a;
    -moz-opacity: @a;
    @iea : @a*100;
    -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=(@{iea}))";
    filter:~"alpha(opacity= @{iea})";
}

Answer 4

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.

Answer 5

This might help someone :)

.opacity(@a : 0.8)
{
    zoom:1;
    opacity: @a;
    -moz-opacity: @a;
    -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=(@{a} * 100))"; 
    filter:~"alpha(opacity= @{a} * 100)";
}