LESScss将rgba转换为十六进制？如何将颜色变量嵌入到混合中？

LESScss将所有rgba颜色转换为十六进制值吗？

我正在尝试创建一个mixin，例如.color，它允许您传递以前定义的颜色变量，并且我希望它在rgba中。

这不行，但这里的想法是：

.bgcolor(@colorvariable,@alpha) {
     background-color: @colorvariable + rgba(0,@alpha);
     }

@colorvariable将在哪里，@blue：rgb(17,55,76);或@green：rgb(125,188,83);等等

我想定义一些这些变量，然后能够将它们传递到.bgcolor或.color mixin并且即时更改alpha透明度。

我觉得这应该是可能的，但我错过了一些东西。 – 现在，我的代码只会输出一个十六进制颜色值，几乎不管我输入什么 – 如果我传入一个@alpha值1，它会输出十六进制颜色值。只有@alpha值小于1，强制浏览器显示一个rgba值。这样就解决了。

现在 – 如何将rgb和一个零件与预定义变量分开传递？

原来，内置hsla功能较少(见 less color functions)。所以有一些帮助，这就是我们发现的：

@dkblue: #11374c;
    .colorize_bg(@color: @white,@alpha: 1) {
           background: hsla(hue(@color),saturation(@color),lightness(@color),@alpha);}

然后使用mixin：

section {.colorize_bg(@dkblue,1);}

所以我们传递颜色变量@dkblue和更少的功能像色调(@color)取@dkblue并拉出其色调，饱和度和亮度值。然后，我们可以传入我们在该混合中定义的alpha。

那么我可以用其他方式来使用它，就像定义透明边框一样。通过添加background-clip：padding-Box;到.colorize_bg我确保我的边框显示在bg框颜色之外(不是CSS3的神奇？)然后我可以重新定义mixin工作的边框颜色：

.colorize_border(@color: @white,@alpha: 1) {border-color: hsla(hue(@color),@alpha);}

然后通过mixin给出截面的边框宽度，样式和定义颜色：

section {border-width: 0 10px; border-style: solid; .colorize_border(@dkblue,.5);

你会得到魔术，闪亮的透明边框，如：http://i.stack.imgur.com/4jSKR.png

原文地址：https://www.jb51.cc/css/218695.html