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

【问题标题】：Convert rgba colour definition string in LESS to color instance将LESS中的rgba颜色定义字符串转换为颜色实例
【发布时间】：2013-03-28 12:33:10
【问题描述】：

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

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

我尝试了什么

...而且不工作

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

如何转换成颜色？

【问题讨论】：

标签： type-conversion less mixins

【解决方案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);
  }

【讨论】：

谢谢马丁。这个问题只是我必须解决的整个问题的一部分。我还需要解析参数并最终决定手动混合两种颜色。你可以阅读关于它的whole blog post。如果您有任何进一步的建议，您可以随时在帖子上发表评论。