带有 IE 过滤器 Alpha 不透明度 CSS 的 LESSCSS 方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9436776/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
LESSCSS method with IE FIlter Alpha Opacity CSS
提问by Evan Larsen
I am using LESSCSS. I'm trying to create a method for opacity:
我正在使用LESSCSS。我正在尝试创建一种不透明度方法：
.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:
但是，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]: }
What am I doing wrong?
我究竟做错了什么？
回答by Luke Page
In dotless, do this. (I would NOT recommend script tags - they are ugly, language specific and not supported by dotless).
在 dotless 中，这样做。（我不推荐脚本标签——它们很丑，特定于语言，不受 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...
在 dotless 1.2.3（当它在几周内发布时，或者 github 头，你应该能够做到这一点......
.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.
和回复：来自 Mathletics 的评论，dotless 不是“最糟糕的编译器”。它匹配 less.js 到 1.1.5，很快就会是 1.2.2，并且针对 less.js 的 600 个错误中的许多都在 dotless 中得到了修复。您可能在 8 个月前使用过 dotless，但事情发生了变化并且错误得到了修复……dotless 还对注释和变量范围提供了更好的支持。
回答by Mathletics
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.
下面是正在发生的事情：在前缀之后，用反引号将整个表达式包装起来，以便将其计算为 JavaScript。然后您可以将乘法的结果添加到字符串的其余部分；您还需要将 LESS 变量用引号和花括号括起来，以便编译器可以在乘法之前对其进行评估。
This has been a cool question; I didn't actually know LESS could do this.
这是一个很酷的问题；我实际上并不知道 LESS 可以做到这一点。
回答by Ijas Ameenudeen
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)";
}
回答by Dimko Desu
There is nice solution I found in internet - LESS CSS class for cross browser opacity:
我在互联网上找到了一个很好的解决方案 -跨浏览器不透明度的 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;
}
回答by mr_quok
naaa .. this one worked for me:
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})";
}
