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

在无网点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并且600个错误中的许多针对less.js是固定的在无数。您可能在8个月前使用了dotless，但事情发生了变化，错误得到了解决......无点也有更好的支持评论和变量范围。

Answer 2

您需要在字符串前加~，如下所示：

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

来自文档：Escaping

更新：你需要用大括号包装变量名。

.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 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 5

naaa .. 这个对我有用：

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

使用IE FIlter Alpha Opacity CSS的LESSCSS方法

5 个答案: