Question

我想将HEX（@color）中的基色转换为rgba，然后在.box-shadow（x y b color）中使用它;

我已经看到一大堆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);
}

分别传递RGB颜色和不透明度/ alpha的.box-shadow 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只会将其保持为十六进制值），只需use the fade() function。所以......

<强> LESS

@color: #ff0000;

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

CSS输出

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

Answer 3

答案很好，我猜你也可以直接调用box-shadow跨浏览器功能：

.toShadow(@color: red) {
  @color-rgba: rgba(red(@color), green(@color), blue(@color), .6);
  .box-shadow(~"inset 0 0 3px @{color-rgba}");
}

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

3 个答案: