使用不透明度值在 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 值的正确颜色值？

如果可以在调色板中使用不透明度，我想知道为什么 'lightest' 值会编译成基色。这里的准则是什么？我应该怎么做呢？

欢迎任何意见

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

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

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

Best way to create color palette in sass with opacity values or translate opaque colors to base colors

css

sass

colors

opacity

color-palette