在sass中创建具有不透明度值的调色板或将不透明颜色转换为基本颜色的最佳方法

Question

我正在为客户端重新构建整个sass设置，为了他们的调色板，我创建了一个包含调色板的地图。为了客户，我在这个问题中插入了一些假颜色值。

$foundation-palette: (
primary: (
blue: (
base: rgba(155, 177, 255, 1),
light: rgba(155, 177, 255, 75%),
lighter: rgba(155, 177, 255, 50%),
lightere: rgba(155, 177, 255, 25%),
lightest: rgba(155, 177, 255, 15%),
),
beige: (
base: rgba(255, 233, 155, 1),
light: rgba(255, 233, 155, 75%),
lighter: rgba(255, 233, 155, 50%),
            lightere: rgba(255, 233, 155, 25%),
            lightest: rgba(255, 233, 155, 15%),
),
),
secondary: (
base: rgba(233, 151, 144, 1),
light: rgba(233, 151, 144, 80%),
),
tertiary: (
green: (
base: rgba(109, 192, 102, 1),
light: rgba(109, 192, 102, 75%),
lighter: rgba(109, 192, 102, 50%),
lightere: rgba(109, 192, 102, 25%),
lightest: rgba(109, 192, 102, 15%),
),
....
),
white: #fff
);

问题是，调色板包含许多颜色，这些颜色都具有由不透明度值定义的不同色调。

在当前的设置中，不透明度值不会被注册，这意味着当我尝试使用最浅的主蓝色时，它将被编译为该颜色的基本颜色(没有不透明度值(。

然而，我在犹豫是否应该用不透明度值来声明调色板。尽管这是客户的设计原则，但我想知道这在你的sass设置中有多好。例如，如果我想要浅灰色，它将是黑色的不透明版本。

根据这一点，我要么想声明没有不透明的颜色，但我如何找到与不透明版本匹配的rgb值的正确颜色值？

如果在调色板中使用不透明度是可以的，我想知道为什么"最轻"的值会编译成基本颜色。这里的指导方针是什么？我该怎么办？

任何输入都值得赞赏

编辑：我正在通过绘制地图来访问颜色获取：

$primary-blue-lightest: map-get(map-get(map-get($foundation-palette, primary), blue), lightest);

Answer 1

另一种简单的方法可以是创建一个function，并将基本颜色和不透明度作为参数：

@function colorPalette($RGBColor, $opacityLevel) {
@return rgba($RGBColor, $opacityLevel);
}

然后你可以创建一个变量的这个功能：

$green: colorPalette(rgb(0,255,0), .9);

并使用它：

.section { background-color: $green; }