css - 在 SASS 中生成动态颜色图

Question

我正在尝试生成一个相当自动化的系统来定义 SASS 中的颜色。我有一个颜色列表，用十六进制值定义(像这样:$color--deep-ocean: #123143;)和全局 $colors: (); 定义。

然后我想动态地创建它们的 RGBA 值，并且考虑到变量插值在 SASS 中不是一个选项，我已经尝试过贴图。

我的想法是为 set-color 函数提供一个名称和一种颜色，以使用 map-merge 填充我的 $colors 变量，然后我可以使用 get-color 检索它。下面是我的两个函数定义以及我如何尝试使用它们:

@function color-set($name, $hex) {
    $submap: (hex: $hex);

    @for $o from 0 to 20 { // Going in increments of 5
        $percentage-decimal: $o*0.05;
        $percentage: $o*5;
        $submap: map-merge($submap, ($percentage: rgba($hex, $percentage-decimal)));
    }

    $colors: map-merge($colors, ($name: $submap));
    /* We should then have a map that looks like this:
    $colors: (colorname: (
    hex: #000000,
    0: rgba(0,0,0,0),
    5: rgba(0,0,0,.05),
    // and so on…
    100: rgba(0,0,0,1)
    )
    )
    … right? */
}

@function color-get($name, $opacity: hex) {
    @if $opacity != hex { // Returns RGBA value
        @return map-get(map-get($colors,$name), $opacity);
    }
    @else { // Returns hexidecimal value
        @return map-get(map-get($colors,$name), hex);
    }
}

如果我的功能令人困惑，请告诉我!我会尝试更好地评论它们。

这就是我尝试定义颜色的方式(_variables.scss 的一部分):

color-set(bkgrnd, $color--deep-ocean);

下面是我尝试使用我的颜色的方式:

body { // These colours have been defined, too …supposedly
    background-color: color-get(bkgrnd, 80);
    color: color-get(white);
}

这是我在 _variables.scss 上遇到的错误:

“...ackground color”后的 CSS 无效:需要 1 个选择器或 at-rule，是“color-set(bkgrnd, $”

所以我觉得我错过了什么。我已经为这个问题纠结了四个小时，我快要疯了。这可能是 super 简单的东西，但我似乎无法弄清楚。我随便使用 SASS，所以我可能没有意识到一些语法问题，但如果有人知道如何解决这个问题，我将不胜感激。

祝你有美好的一天，感谢你花时间阅读我的帖子!

问候， 克里斯

PS:如果该信息相关，我会使用 Brackets SASS 插件在 Brackets 中编译它。

Answer 1

在进一步挖掘之后，我发现了我的问题所在。 SASS 函数必须有一个 @return 指令才能工作。因此，我更新了我的 color-set 函数，并在它的末尾添加了 @return $colors;。然后，我只需要给出一些指令，这样该函数就不会被“突然”调用，所以我将我的 $colors 变量分配给它，如下所示:

$colors: color-set(bkgrnd, $color--deep-ocean);

我认为一直将 $colors 重新分配给它自己可能有点重复，但考虑到这只会影响编译期间的性能，而不影响我最终的 CSS 文件，我可以摆脱它。可能有更好的方法(如果你有想法，我会洗耳恭听!)但现在这正好符合我的需要。

这样，我就可以使用贴图处理我的颜色。感谢任何看过我的问题的人，很抱歉张贴这个 - 我应该花一些时间冷静下来再考虑一下。我希望这可以帮助遇到同样问题的其他人解决他们的问题!

保重，

克里斯

PS:如果你想要它，下面是完整的代码。

_colors.scss

$color--deep-ocean: #123143;
$color--yellow: #ffce00;
// And so on, and so forth…

_mixins.scss

@function color-set($name, $hexval) {
    @return map-merge($colors, ($name: $hexval));
}

@function color-get($name, $opacity: hex) {
    @if $opacity != hex { // Returns RGBA value
        $opacity-decimal: $opacity/100;
        @return rgba(map-get($colors,$name), $opacity-decimal);
    }
    @else { // Returns hexidecimal value
        @return map-get($colors, $name);
    }
}

_variables.scss

$colors: color-set(bkgrnd, $color--deep-ocean);
$colors: color-set(main, $color--yellow);
// And so on, and so forth again…

使用示例:

body {
    background-color: color-get(bkgrnd); // Returns #123143
    color: color-get(main); // Returns #ffce00
}

button {
    border: 2px solid color-get(main, 50); // Returns rgba(255, 206, 0, 0.5)
}