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

Question

假设我已经解析了我的 mixin 参数并且颜色是使用rgba函数提供的。

现在我想混合其中两种颜色，但 LESSmix函数需要 type 的参数实例color。

我试过的

...并且不起作用

1. 打电话color("rgba(0,0,0,.5)")
2. mix(@first, ~"@{second}")@second像这样的字符串在哪里rgba(0,0,0,0.5)

如何转换为颜色？

Answer 1

恐怕您不会在 LESS 中找到内置函数来执行此操作。

函数参数需要是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);
  }