Question

我将rgba值存储为变量（例如：@black: rgba(0, 0, 0, 1.0);），我意识到如果我可以使alpha值变量会很好。

所以，我试过了..

.color_black (@alpha: 1.0) { rgba(0, 0, 0, @alpha) }

问题很简单，这不起作用。参数部分似乎是正确的，事实上，一旦你添加了rgba（）代码它似乎只是“破坏”。不太喜欢rgba电话。

现在我可以通过定义属性标记来完成这项工作，例如..

.color_black (@alpha: 1.0) { color: rgba(0, 0, 0, @alpha) }

但是这种方式会破坏存储单一颜色的有用性，并在城镇中重复使用它。在背景，文本，渐变等。

那么，有关如何解决这个问题的想法吗？

编辑：虽然我对此不满意......这是我能想到的最佳解决方案..

.color_black (@prop: color, @alpha: 1.0) { @prop: rgba(0, 0, 0, @alpha) }

它不像函数那么有用，因为你不能在其他属性（渐变等）中使用它。想法？

Answer 1

看一下 less 的颜色函数：http://lesscss.org/#-color-functions

我认为'淡化'是你正在寻找的。只需将颜色设置为变量......

@black: #000000;

...并使用fade()：

color: fade(@black, 80%);

Answer 2

你遇到这个问题可能是因为rgba（）是internal function in less; hsla（）也是如此。

要将mixin用作根据需要设置变量的函数，您需要使用mixins as functions feature，如下所示：

// mixin
.toRGBA( @color, @alpha) { 
  @color_plus_alpha: rgba(red(@color), green(@color), blue(@color), @alpha); //[A]
}


// usage
.someClass {
  .toRGBA(orange, 0.3); // [B]
  color: @color_plus_alpha; // [C]
}

这里的问题是添加的行[B]，以及您总是需要在[C]中使用[C]中的变量@color_plus_alpha这一事实。在[A]行的mixin中定义。

这在编辑时有效，并输出以下内容：

.someClass {
  color: rgba(255, 165, 0, 0.3);
}

然而，这仍然不允许你将mixin的“输出”分配给OP所需的任意变量。

请注意，red（），green（）和blue（）也是内部函数，分别吐出输入颜色的红色，绿色和蓝色成分。

编辑： 更新了答案，使其更具可重用性。以前的版本仅适用于硬编码的属性名称color。

函数可以返回只是一个rgba值吗？

2 个答案:

函数可以返回*只是*一个rgba值吗？

2 个答案:

函数可以返回只是一个rgba值吗？