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

131

我有以下代码：

@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函数，该rgba()函数根据@color变量生成一个值。

如何用Less做到这一点？

css less

— 胖乎乎的
source

3

淡入/淡出/淡入淡出功能是否不符合您的需要？ lesscss.org/#reference

— cimmanon

348

实际上，Less语言带有一个称为的嵌入式功能fade。您传递一个颜色对象和一个绝对不透明度％（值越高表示透明度越低）：

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

— 罗纳德·帕弗特
source

42

@Soc回答了OP的问题，但您给了我们答案，每个人都来这里找到！谢谢！

— BillyNair 2014年

1

我认为数量参数不是透明度级别，而是指定透明度级别？

— mousio 2015年

2

@mousio实际上，通过精确选择50%，可以同时实现透明性和不透明性。:)

— Dem Pilafian 2015年

1

@mousio如果您想真正掌握技术，我相信将“半透明”颜色与元素所覆盖的每个像素的颜色混合的比例更准确-请参阅en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending：）但实际上，您当然是对的；百分比或十进制值代表不透明度级别，而不是透明度级别！

— Brian Lacy 2015年

5

记录下来，这是API中的缺陷。每次我要使用它时都必须查一下。明智的做法是，像SASS一样将现有的RGBA加糖到LESS调用中-rgba（@colorValue，.5），以使其输出与实际CSS rgba声明完全相同的铰链。但是，嘿，那是我在抱怨。:)

— dudewad 2015年

105

如果不需要Alpha键，则可以简单地使用颜色的十六进制表示形式。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/

— 塞巴斯蒂安·斯蒂尔
source

我收到这个错误怎么办？error evaluating function 'red': Cannot read property '0' of undefined

— Aldi Unanto 2013年

一段时间未更新，但是使用更少的PHP，我得到以下错误-

@colorGold: color('#C6AF87');  .box {         background-color: rgba(red(@colorGold),green(@colorGold),blue(@colorGold),0.3); }

错误是-无法编译CSS文件（screen.less）：red（）的预期颜色：在`background-color：rgba（红色（@colorGold），绿色（@colorGold），蓝色（@colorGold），0.3）;

— 克里斯，

1

@Chris，您可以直接分配颜色，以使其与Less PHP一起使用，似乎也可以与当前的less版本一起使用，因此我改编了示例。@colorGold: #C6AF87;

— 塞巴斯蒂安·斯蒂尔2013年

@Soc这是我最终的解决方案，我不知道是什么让我给我留下了将其包装在彩色标签中的印象后不久才找到的！

— 克里斯，

看看我的少函数，stackoverflow.com

— questions/14860874/…

12

我的Less mixin：

.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背景上使用IE过滤器替代方法可以看到：IE9都渲染！，我向mixin添加了几行。

— 帮助
source

2

似乎在最近的Less更新3.81中，您只能在rgba（）函数中使用两个参数。

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

它对我有用，但是我在官方文档中找不到它。

— 德米特里·达维多夫（Dmitry Davydov）
source