如何使用 Less 编译器将十六进制颜色转换为 rgba？答案

【问题标题】：How do I convert a hexadecimal color to rgba with the Less compiler?如何使用 Less 编译器将十六进制颜色转换为 rgba？
【发布时间】：2013-01-29 10:21:05
【问题描述】：

我有以下代码：

@color : #d14836;

.stripes span {
    -webkit-background-size: 30px 30px;
    -moz-background-size: 30px 30px;
    background-size: 30px 30px;
    background-image: -webkit-gradient(linear, left top, right bottom,
        color-stop(.25, rgba(209, 72, 54, 1)), color-stop(.25, transparent),
        color-stop(.5, transparent), color-stop(.5, rgba(209, 72, 54, 1)),
        color-stop(.75, rgba(209, 72, 54, 1)), color-stop(.75, transparent),
        to(transparent));

我需要将@color 转换为rgba(209, 72, 54, 1)。

因此，我需要将代码中的 rgba(209, 72, 54, 1) 替换为 Less 函数，该函数从我的 @color 变量生成 rgba() 值。

如何用 Less 做到这一点？

【问题讨论】：

淡入/淡出/淡出功能不能满足您的需求吗？ lesscss.org/#reference

标签： css less

【解决方案1】：

实际上，Less 语言带有一个名为 fade 的嵌入式函数。您传递一个颜色对象和绝对不透明度 %（值越高，透明度越低）：

fade(@color, 50%);   // Return @color with 50% opacity in rgba

【讨论】：

@Soc 回答了 OP 的问题，但您给了我们答案，其他人都来这里寻找！谢谢！
我认为数量参数不是透明度级别而是相反指定不透明度级别？
@mousio 实际上，通过准确地选择50%，透明度和不透明度都是正确的。 :)
@mousio 如果你想获得真正的技术，我相信它更准确地是“半透明”颜色的比例与元素覆盖的每个像素的颜色混合 - 见en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending： ) 但实际上，你当然是对的；百分比或十进制值表示不透明度级别，而不是透明度级别！
作为记录，这是 API 中的一个缺陷。每次我想使用它时，我都必须查找它。明智的做法是将现有的 RGBA 糖化为像 SASS 那样的 LESS 调用—— rgba(@colorValue, .5) ，这样它就会输出与实际 CSS rgba 声明相同的内容。但是，嘿，那是我在发牢骚。 :)

【解决方案2】：

如果您不需要字母键，您可以简单地使用颜色的十六进制表示。 alpha 为 '1' 的 rgba 颜色与十六进制值相同。

这里有一些例子来证明：

@baseColor: #d14836;

html {
    color: @baseColor;
    /* color:#d14836; */
}

body {
    color: rgba(red(@baseColor), green(@baseColor), blue(@baseColor), 1);
    /* color:#d14836; */
}

div {
    color: rgba(red(@baseColor), green(@baseColor), blue(@baseColor), 0.5);
    /* rgba(209, 72, 54, 0.5); */
}

span {
    color: fade(@baseColor, 50%);
    /* rgba(209, 72, 54, 0.5); */
}

h3 {
    color: fade(@baseColor, 100%)
    /* color:#d14836; */
}

在线测试此代码：http://lesstester.com/

【讨论】：

我遇到的这个错误怎么样？ error evaluating function 'red': Cannot read property '0' of undefined
这已经有一段时间没有更新了，但是使用 Less PHP 我收到以下错误 - @colorGold: color('#C6AF87'); .box { background-color: rgba(red(@colorGold),green(@colorGold),blue(@colorGold),0.3); } 错误是 - 无法编译 CSS 文件 (screen.less): color expected for red( ): 在 `background-color: rgba(red(@colorGold),green(@colorGold),blue(@colorGold),0.3) 处失败；
@Chris 您可以直接分配颜色以使其与 Less PHP 一起工作，它似乎也适用于当前的 less 版本，所以我调整了这个例子。 @colorGold: #C6AF87;
@Soc 这是我的最终解决方案，在我不知道是什么给了我需要用颜色标签包装它的印象后不久我找到了它！
查看我的less函数，stackoverflow.com/questions/14860874/…

【解决方案3】：

我的 Less 混音器：

.background-opacity(@color, @opacity) {
    @rgba-color: rgba(red(@color), green(@color), blue(@color), @opacity);

    background-color: @rgba-color;

    // Hack for IE8:
    background: none\9; // Only Internet Explorer 8
    filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d')", argb(@rgba-color),argb(@rgba-color))); // Internet Explorer 9 and down
    // Problem: Filter gets applied twice in Internet Explorer 9.
    // Solution:
    &:not([dummy]) {
      filter: progid:DXImageTransform.Microsoft.gradient(enabled='false'); // Only IE9
    }
}

试试看。

编辑：正如在 rgba background with IE filter alternative: IE9 renders both! 上看到的那样，我在 mixin 中添加了一些行。

【讨论】：

【解决方案4】：

似乎在最近的 Less 更新 3.81 中，您可以在 rgba() 函数中只使用两个参数。

rgba(white, 0.3) or rgba(white, 30%) => rgba(255, 255, 255, 0.3)

它对我有用，但我在 the official documentation 中找不到它。

【讨论】：