LESScss将rgba转换为十六进制？ 如何将颜色变量嵌入到mixin中？
LESScss是否将所有rgba颜色转换为十六进制值？
我正在尝试创建一个mixin，例如.color，它允许您传入之前定义的颜色变量，并且我希望它位于rgba中。
这不起作用，但这是这个想法：
.bgcolor(@colorvariable,@alpha) {
background-color: @colorvariable + rgba(0, 0, 0, @alpha);
}
@colorvariable在哪里， @blue: rgb(17,55,76); 或@green: rgb(125,188,83); 等等
我想定义一堆这些变量，然后能够将它们传递给.bgcolor或.color mixin，并在飞行中更改alpha透明度。
我觉得这应该是可能的，但我错过了一些东西。 - 现在，我的代码只输出一个十六进制颜色值，几乎不管我输入什么内容。 - 如果我通过@alpha值为1，它会输出一个十六进制颜色值。 只有@alpha值小于1才会强制浏览器显示rgba值。 这样就解决了。
现在 - 如何从预定义变量中分别传入rgb和一个部分？
原来，少了hsla函数内置（见较少的颜色功能）。 因此，借助一些帮助，我们发现了以下内容：
@dkblue: #11374c;
.colorize_bg(@color: @white, @alpha: 1) {
background: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);}
然后使用mixin：
section {.colorize_bg(@dkblue,1);}
所以我们通过颜色变量@dkblue和更少的' hue(@color) '函数取@dkblue并提取其色调，饱和度和亮度值。 然后我们可以传入我们在该mixin中定义的一个alpha。
然后我可以用其他方式使用它，例如定义透明边框。 通过添加background-clip: padding-box; 到.colorize_bg我确保我的边框在bg box颜色之外显示（不是CSS3魔法？）然后，我可以重新定义mixin为边框颜色工作：
.colorize_border(@color: @white, @alpha: 1) {border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);}
然后给出section的边框宽度，样式，并通过mixin定义颜色：
section {border-width: 0 10px; border-style: solid; .colorize_border(@dkblue, .5);
你会得到神奇的，有光泽的透明边框，就像这样：http://i.stack.imgur.com/4jSKR.png
LESS有一组功能可以fade ， fadeIn或fadeOut一种颜色。 你应该能够将任何颜色传递给这些混合（hsl，rgb，rgba，hex等）
// fade color to 40%
color: fade(#000000, 40);
// fade in color by 10%
color: fadeIn(rgba(0, 0, 0, .5), 10);
// fade out color by 10%
color: fadeOut(rgba(0, 0, 0, .5), 10);
您不需要转换为hsla，因此您不需要白色值
.hexBackgroundToRGBA(@color,@alpha){
@myred:red(@color);
@mygreen:green(@color);
@myblue:blue(@color);
background-color: @color;
background-color: rgba(@myred,@mygreen,@myblue,@alpha);
}
你必须编写一些这些mixin，你需要设置背景颜色属性集以外的东西，但这就是主意。 就像这样称呼它：
#selector{ .hexBackgroundToRGBA(@gray, 0.8); }
这将使用@gray变量中的任何颜色值，并以80％的透明度输出跨浏览器解决方案，并为不支持rgba（）的浏览器提供纯色回退。
链接地址: http://www.djcxy.com/p/15343.html上一篇: LESScss converting rgba to hex? how to nest color variables into a mixin?