css - 带有IE FIlter Alpha不透明度CSS的LESSCSS方法

我正在使用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]: }

我在做什么错？

最佳答案

在无点的情况下，执行此操作。 (我不建议您使用脚本标签-它们很丑陋，特定于语言并且不受dotless支持)。

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

在无点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，但是事情发生了变化，并且错误已修复... dotless还对注释和变量作用域提供了更好的支持。