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

问题描述

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

Suppose I've parsed my mixin parameters and colours are provided using rgba function.

现在，我想混合使用两种颜色，但是LESS mix函数需要类型为color的参数实例.

Now I would like to mix two of those colours, but LESS mix function requires parameter instances of type color.

...而且不起作用

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

1. calling color("rgba(0,0,0,.5)")
2. mix(@first, ~"@{second}") where @second is a string like rgba(0,0,0,0.5)

如何转换为颜色?

推荐答案

恐怕您会在LESS中找不到内置函数来完成此任务.

I'm afraid you won't find a built in function to do this in LESS.

color()函数参数必须为十六进制或其简写形式.

The color() functions argument needs to be a hexadecimal or its shorthand representation.

但是您可以进一步使用javascript 将该字符串解析为

But you can further parse the string with javascript to

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

• extract the individual r,g,b and alpha values,
• pass the individual values to the rgba() function to get a variable of typecolor.

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

You could do the first step in your original parsing.If you need to do all in LESS you can do something like this:

  @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()，我们将字符串转换为可以进一步使用的数字.

Unfortunately the string can not be directly read into the rgba() or similar functions as they expect multiple arguments. Even with string escaping (eg. ~) the output gets formated as a single variable (~"a, b, c" becomes a, b, c and acts as a single output string for the css), so we need to get each value individually and pass it to its respective argument/variable of the rgba() function. Using the function unit() we transform a string to a number that can be used further.

例如:

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

产生 CSS :

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

这篇关于将LESS中的RGBA颜色定义字符串转换为颜色实例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！