基于SASS中的主模板颜色更改CSS RGBA颜色

我正在用SASS编写HTML模板

我想要实现的是，每当我的客户更改主模板颜色时，框阴影颜色也将更改并与模板颜色匹配

---

我有一个主模板颜色变量和框阴影混合

$template-color: #6c8ce2;

盒阴影颜色

@mixin box-shadow($amount,$blur,$spread,$opacity) {
  box-shadow: $amount $blur $spread rgba(49, 2, 190, $opacity);
  -webkit-box-shadow: $amount $blur $spread rgba(49, 2, 190, $opacity);
  -moz-box-shadow: $amount $blur $spread rgba(49, 2, 190, $opacity);
}

这里，由于rgba的颜色代码与主模板的颜色不同。这将不起作用。因此，我尝试通过以下两个选项来实现它

---

方法一
我尝试用类似这样的$template color替换rgba颜色

box-shadow: $amount $blur $spread $template-color;

但问题是，长方体阴影的不透明度需要非常柔和和透明

如果不使用RGBA的不透明度，我无法实现它

---

方法二
我还尝试在$template color后面添加一个alpha十六进制，如下所示

box-shadow: $amount $blur $spread $template-color+2b

方法二的问题是每种颜色都有自己的alpha十六进制。这是动态的，我猜不到

---

我可以不用javascript实现吗？

像这样更改混音，从

$template color

生成RGBA：

@mixin box-shadow($amount, $blur, $spread, $opacity, $template-color) {
  $red: red($template-color);
  $blue: blue($template-color);
  $green: green($template-color);
  box-shadow: $amount $blur $spread rgba($red, $green, $blue, $opacity);
  -webkit-box-shadow: $amount $blur $spread rgba($red, $green, $blue, $opacity);
  -moz-box-shadow: $amount $blur $spread rgba($red, $green, $blue, $opacity);
}

更新： 我发现

rgba

函数接受两个参数（颜色和不透明度），您可以做得更简单：

@mixin box-shadow($amount, $blur, $spread, $opacity, $template-color) 
{
  box-shadow: $amount $blur $spread rgba($template-color, $opacity);
  -webkit-box-shadow: $amount $blur $spread rgba($template-color, $opacity);
  -moz-box-shadow: $amount $blur $spread rgba($template-color, $opacity);
}

---

呃，这就像黑客一样，我甚至不知道它的存在。非常感谢@Mahdi。我已经搜索并发现你甚至不需要这个黑客！

rgba

函数接受两个参数，并可以将颜色与不透明度组合起来。我会更新我的答案。我应该用两个参数尝试RGBA：D。更新一个更好。再次感谢。