较少的Mixin /函数将@Color HEX更改为RGBA到PASS到另一个mixin

Question

我想将HEX(@color)中的基色转换为rgba,并将其用于像.box-shadow(xyb color)这样的mixin中;

我已经看到一大堆mixins将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用于分别传递RGB颜色和不透明度/ alpha 的mixin可能是这样的:

.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);
}

Answer 2

要获得一个rgba值(假设你给的是100%不透明度以外的东西,因为在这种情况下LESS只会将其保持为十六进制值),只需使用该fade()函数即可.所以...

减

@color: #ff0000;

.test {
  box-shadow: 2px 2px 5px fade(@color, 99%); 
}

CSS输出

.test {
  box-shadow: 2px 2px 5px rgba(255, 0, 0, 0.99);
}