LESS Mixin/Function 将@Color HEX 更改为 RGBA 以 PASS 到另一个 mixin

Question

我想将十六进制(@color)中的基色转换为 rgba 并在像 .box-shadow(x y b color); 这样的混合中使用它。

我已经看到大量的 mixin 将 HEX 转换为 RGBA 并设置背景颜色，我知道我可以为 box-shadow 创建自己的混合。 但是是否有通用解决方案，以便我们可以使用任何现有的 mixin。

尝试/想要这样的东西 (不起作用) :

/** Extend LESS functions like (lighten, darken, mix) **/
rgbaColorIn(@color, @opacity : 1){
  return rgba( red(@color), green(@color), blue(@color), @opacity );
}

// ----- or ------

/** Passing in a reference to mixin and params **/
.rgbaColorIn(@selector, @params, @color, @opacity : 1){
  @rgbaColor: rgba( red(@color), green(@color), blue(@color), @opacity );
  @selector(@params @color);
}

Answer 1

没有return关键字少。如果你想要一个返回值的 mixin，那么你可以在其中定义一个变量，例如:

.rgbaColorIn(@color, @opacity : 1){
  @result: rgba( red(@color), green(@color), blue(@color), @opacity );
}

您可以在称为 mixin 的范围内访问它:

.section {
  .rgbaColorIn(red, 50%);
  background-color: @result;
}

但是如果你只是想从一个 RGB 颜色生成一个 RGBA，你可以使用 fade功能:

.section {
  @result: fade(red, 50%);
  background-color: @result;
}

这将在 CSS 中呈现相同的结果:

.section {
  background-color: rgba(255, 0, 0, 0.5);
}

一个 .box-shadow mixin 分别传递 RGB 颜色和不透明度/alpha 可能是这样的:

.box-shadow(@x; @y; @b; @color; @opacity) {
   box-shadow: @x @y @b fade(@color, @opacity);
   -moz-box-shadow: @x @y @b fade(@color, @opacity);
   -webkit-box-shadow: @x @y @b fade(@color, @opacity);
}

您可以在这样的选择器中使用它:

.section {
  .box-shadow(2px; 2px; 1px; pink; 50%);
}

并获得这个CSS:

.section {
  box-shadow: 2px 2px 1px rgba(255, 192, 203, 0.5);
  -moz-box-shadow: 2px 2px 1px rgba(255, 192, 203, 0.5);
  -webkit-box-shadow: 2px 2px 1px rgba(255, 192, 203, 0.5);
}