根据SASS中的主模板颜色更改CSS RGBA颜色

Question

我正在用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;

但问题是盒子阴影的不透明度需要非常柔软和透明。

Example box shadow image is here

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

---

方法二 我也试着像这样在$ template-color后添加一个alpha十六进制。

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

方法的两个问题是每种颜色都有自己的alpha十六进制。这是动态的，我无法猜测。

我可以在不使用javascript的情况下实现吗？

Answer 1

像这样改变你的mixin从你的qazxsw poi生成RGBA：

$template-color

Update:

我发现

@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