LESS Mixin/将@Color十六进制更改为RGBA以传递到另一个Mixin的函数

我想将十六进制（@color）中的基色转换为rgba，并在类似mixin的.box阴影（xyb颜色）中使用它

我看到了大量的混音，可以将十六进制转换为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);
}

要获得一个rgba值（假设您给它的不是100%不透明度，因为在这种情况下，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);
}

---

less中没有

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，可以使用

淡入

功能：

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

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

将在CSS中呈现相同的结果：

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

一个

.box阴影

混入以分别传递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%);
}

您可以在如下选择器中使用：

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

---

答案很好，我想你也可以直接调用一个框阴影跨浏览器函数：

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

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

---

你的意思是你想调用像

.rgbaColorIn（红色，50%）

这样的东西并获得

rgba（255，0，0，0.5）

？你认为@helderdarochaI更喜欢SASS的方法是什么。。。您只需使用常规rgba函数：

rgba（$colorvariable.4）