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

最好的方法是用不透明度值在无聊中创建调色板或将不透明颜色转换为基础颜色

1 个答案: