我尝试了什么

......并且不起作用

致电color("rgba(0,0,0,.5)")
mix(@first, ~"@{second}")其中@second是一个类似rgba(0,0,0,0.5)

如何转换为彩色？

Answer 1

我担心你在LESS中找不到内置功能。</ p>

color()函数参数需要是十六进制或其简写表示。

但您可以进一步使用javascript 解析字符串

提取个别的r，g，b和alpha值，
将各个值传递给rgba()函数以获取类型变量颜色。

您可以在原始解析中执行第一步。如果您需要在LESS中完成所有操作，您可以执行以下操作：

  @color1: "rgba(255, 255, 0, 0.5)";
  @color2: ~`@{color1}.replace(/^(rgb|rgba)\(/,'[').replace(/\)$/,']').replace(/\s/g,'')`;
  @color3: rgba(unit(`@{color2}[0]`),unit(`@{color2}[1]`),unit(`@{color2}[2]`),unit(`@{color2}[3]`));

不幸的是，字符串无法直接读入rgba()或类似函数，因为它们需要多个参数。即使使用字符串转义（例如~），输出也会形成为单个变量（~"a, b, c"变为a, b, c并充当css的单个输出字符串），因此我们需要获取每个值单独并将其传递给rgba()函数的相应参数/变量。使用函数unit()，我们将字符串转换为可以进一步使用的数字。

例如：

  @color4: mix(red,@color3);
  .test {
      color: @color4;
  }

导致 CSS ：

  .test{
    color: rgba(255, 64, 0, 0.75);
  }

将LESS中的rgba颜色定义字符串转换为颜色实例

我尝试了什么

1 个答案: