少CSS预处理器：有没有办法将单个颜色映射到RGB和RGBA定义？

Question

我试图在CSS预处理器中写一个块，少做以下内容：

@transparent_background(@color; @alpha: .8)
{
  background: @color;
  background: rgba(<color R value>, <color G value>, <color B value>, @alpha);
}

如果它是标准的十六进制定义（即#rrggbb），有什么方法可以从@color中获取RGB值？如果@Color被定义了其他方式，有没有办法这样做？

编辑：解决方案

@transparent_background(@color; @alpha: .8)
{
  background: @color;
  background: @color + rgba(0, 0, 0, @alpha);
}

Answer 1

这些解决方案不再起作用了，但是这个解决方案也可以（感谢 @elyse):

.alpha(@color, @alpha: 0.8) {
    color: @color;
    color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
}

这 hsla() 功能虽然未在较少的网站上做广告，但已定义 在源代码中.

Answer 2

尝试这个：

background: @color - rgba(0, 0, 0, 1.0) + rgba(0, 0, 0, @alpha);

减法将清除Alpha通道 @color 然后，您只需添加所需的 @alpha 到Alpha频道。颜色具有完整的操作员套件，并且在两种颜色上操作时，它们可以按组件工作；颜色在内部存储为RGBA组件，因此应该可以使用。另外，将α通道标准化为间隔 [0, 1.0] 因此，从Alpha通道中减去1.0应该清除它而不会引起任何问题。

我现在没有更少的CSS设置，所以我无法检查，但这值得一试。

Answer 3

请注意，您还可以继续使用较少的fadein/vadeout功能：

.alpha(@color, @alpha: 80)
{
    background-color: fadeout(@color, (100 - @alpha));
}

因此， .Alpha（红色，25） 将导致背景色 RGBA（255、0、0、0.25）

Answer 4

我知道这是一个古老的问题，但是如果您要做的就是添加alpha值，请使用 fade(@color, @alpha). 。颜色可以在十六进制，RGBA或HSLA中。