在 sass 中混合两种颜色

Question

假设我在 sass 文件中有这些变量：

$steel-blue: rgba(74, 148, 181,1)!default;
$black: rgba(0, 0, 0,1)!default;

$primary-color: $steel-blue;
$background-color: $black;

$primary-color-overlay: rgba($primary-color,8%);

我想$background-color与$primary-color-overlay它混合应该给我：#060C0E。

我尝试使用mix()函数但无济于事。应该就像我$primary-color-overlay在 之上放置了一个$background-color。

我也想将组合颜色保存为变量。

Answer 1

这不是一个简单的方法，需要一些尝试和错误，但您可以通过使用以下方法通过 Mix 来实现它：

background-color: mix($background-color, $primary-color, 92%);

您只需计算出两种颜色所需的混合百分比即可。#060C0E 不是两者的 50/50 混合。