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

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

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

这是行不通的，但想法是这样的：

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

Where @colorvariable将会，@blue: rgb(17,55,76); or @green: rgb(125,188,83); etc.

我想定义一堆这些变量，然后能够将它们传递给.bgcolor or .colormixin 并动态更改 alpha 透明度。

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

现在——如何将 rgb 和 a 部分与预定义变量分开传递？

事实证明，less 内置了 hsla 函​​数（请参阅较少的颜色函数 http://lesscss.org/#-color-functions）。在一些帮助下，我们发现了以下内容：

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

然后使用混合：

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

所以我们传入颜色变量@dkblue和 less 的功能，如hue(@color) take @dkblue并提取其色调、饱和度和亮度值。然后我们可以传入我们在该 mixin 中定义的 alpha。

然后我可以以其他方式使用它，例如定义透明边框。通过增加background-clip: padding-box; to .colorize_bg我确保我的边框显示在背景框颜色之外（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);

你会得到神奇的、闪亮的透明边框，就像这样：https://i.stack.imgur.com/4jSKR.png https://i.stack.imgur.com/4jSKR.png