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

方法一
我尝试用 $template-color 替换 rgba 颜色

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

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

Example box shadow image is here

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

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

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

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

我可以不使用 javascript 实现吗？

Answer 1

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

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

Change CSS RGBA color based on main template color in SASS

sass

scss-mixins

更新：