css - 在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() 函数但无济于事。就好像我在 $background-color 之上放置了一个 $primary-color-overlay。

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

Answer 1

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

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

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