在 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 值的正确颜色值？

如果在调色板中使用不透明度很好，我想知道为什么“最轻”值会编译成基色。这里的指导方针是什么？我应该怎么做？

感谢任何意见

编辑：我通过 map-get 访问颜色：

$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; }