使用IE FIlter Alpha Opacity CSS的LESSCSS方法

Question

我正在使用LESSCSS.我正在尝试为不透明度创建一个方法:

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

所以,如果我用它来调用它:

h1 {
  .opacity(.5);
}

我希望它输出:

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

但相反,LESS抛出错误:

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]: }

我究竟做错了什么？

Answer 1

无点,做到这一点.(我不推荐脚本标签 - 它们很丑,特定于语言,并且不支持无点).

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

在dotless 1.2.3中(当它在几周内发布时,或github头,你应该能够做到这一点......

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

而且:来自Mathletics的评论,dotless并不是"最糟糕的编译器"..它将less.js与1.1.5匹配,很快就会达到1.2.2,而对于less.js的600个错误中的许多都是无点的.你可能在8个月前使用了dotless,但事情发生了变化,错误得到了解决......无点也有更好的支持评论和变量范围.

Answer 2

您需要在字符串前加上~,如下所示:

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

来自文档:逃避

更新:您需要将变量名称包装在花括号中.

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

这是正在发生的事情:在前缀之后,将整个表达式包装在反引号中,以便将其评估为JavaScript.然后你可以将乘法的结果添加到字符串的其余部分; 您还需要将LESS变量包装在引号和花括号中,以便编译器可以在乘法之前对其进行求值.

这是一个很酷的问题; 我实际上并不知道LESS可以做到这一点.

Answer 3

这可能有助于某人:)

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

Answer 4

我在互联网上找到了很好的解决方案 - 用于跨浏览器不透明度的LESS CSS类:

.opacity(@opacity) {

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