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

Question

我正在用 SASS 编写 HTML 模板。

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

---

我有一个主模板颜色变量和box shadow mixin。

$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 颜色代码与主模板颜色不同。这将不起作用。所以我尝试通过以下两个选项来实现它。

---

方法一
我尝试将 rgba 颜色替换为 $template-color 类似的东西

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

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

Example box shadow image is here

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

---

方法二
我也尝试像这样在 $template-color 后面添加 一个 alpha hex。

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

方法二的问题是每种颜色都有自己的 alpha hex。它是动态的，我猜不出来。

不使用javascript可以实现吗？

Answer 1

像这样更改您的 mixin 以从您的 $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);
}