我试图在LESS中使用
Javascript编译在PHPstorm ..
我正在尝试创建一个基于跨浏览器实现的功能,该实现在本站发现：link
具体来说,我正在尝试创建一个LESS函数来重新创建这段代码：
.crossbrowseropacity {
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0,0);
/* RGBa with 0.6 opacity */
background: rgba(0,0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000)";
}
这是我在LESS中实现的：
.crossbrowser(@color,@alpha){
@myred:red(@color);
@mygreen:green(@color);
@myblue:blue(@color);
@ievalue:Math.floor(@alpha * 255).toString(16);
background-color: @color;
background-color: rgba(@myred,@mygreen,@myblue,@alpha);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#@ievalue+@myred+@mygreen+@myblue,endColorstr=#@ievalue+@myred+@mygreen+@myblue);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#@ievalue+@myred+@mygreen+@myblue,endColorstr=#@ievalue+@myred+@mygreen+@myblue)";
}
它不会编译正确的…有人可以帮助我吗？
解决方法
假设您正在使用LESS 1.3.1或更高版本,那么这将完成您所需要的(使用内置函数)：
减
//define mixin
.crossbrowser(@color,@alpha){
@rgba: rgba(red(@color),green(@color),blue(@color),@alpha);
@argb: argb(@rgba);
background-color: @color;
background-color: @rgba;
filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{argb},endColorstr=@{argb})";
-ms-filter: ~"progid:DXImageTransform.Microsoft.gradient(startColorstr=@{argb},endColorstr=@{argb})";
}
//use it
.crossbrowser(red,.2);
CSS输出
background-color: #ff0000; background-color: rgba(255,0.2); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ff0000,endColorstr=#33ff0000); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33ff0000,endColorstr=#33ff0000);