LESS CSS預處理器：有沒有辦法將單一顏色映射到rgb和rgba定義？

Question

我正在嘗試在CSS預處理器LESS中編寫一個塊，它將執行以下操作：

@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

嘗試這個：

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

減法將清除@color上的alpha通道，然后你只需將所需的@alpha添加到alpha通道。 顏色具有全套操作員，並且當以兩種顏色操作時它們逐個組件地工作; 顏色在內部存儲為RGBA組件，因此這應該有效。 此外，alpha通道被標准化為在區間[0, 1.0]因此從alpha通道中減去1.0應該清除它而不會引起任何問題。

我現在沒有設置CSS LESS所以我無法檢查但是這值得一試。

Answer 2

我知道這是一個老問題，但如果您要做的就是添加一個alpha值，只需使用fade(@color, @alpha) 。 顏色可以是十六進制，rgba或hsla。

Answer 3

這些解決方案都不再有效，但這個解決方案確實有效（感謝@Elyse ）：

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

hsla()函數雖然未在LESS網站上公布，但在源代碼中定義。

Answer 4

請注意，您還可以繼續使用LESS的fadein / fadeout功能：

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

因此， .alpha（紅色，25）將導致背景顏色為rgba（255,0,0,0.25）