-1

我正在用 SASS 编写 HTML 模板。

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

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

$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 hex。

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

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

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

4

1 回答 1

0

像这样更改您的 mixin 以从您的 RGBA 生成$template-color：

@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);
}
于 2018-07-25T04:54:15.387 回答