Question

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

然后我想动态创建他们的RGBA值，并且给定变量插值不是SASS中的一个选项，我已经在地图上试过了。

我们的想法是为set-color函数提供一个名称和颜色，以便使用$colors填充我的map-merge变量，然后我可以使用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上的错误：

＆＃34; ... ackground color＆＃34;：预期1个选择器或at-rule的无效CSS，是＆＃34;颜色设置（bkgrnd，$＆＃34;

所以我觉得我错过了什么。我已经把头缠了四个小时，我发疯了。它可能是超级简单的东西，但我似乎无法弄明白。我随便使用SASS，所以我可能不知道一些语法问题，但如果有人知道如何解决这个问题，我将非常感激。

祝你有愉快的一天，感谢您花时间阅读我的帖子！

此致克里斯

PS：我使用Brackets SASS插件在Brackets中进行编译，如果这些信息相关的话。

Answer 1

在挖掘了一些之后，我发现了我的问题。 SASS函数必须具有toolbarState : { temSelectionCtrl: {...}, functionalCtrl: {...}, operationalCtrl: {...}, referenceCtrl: {...} }指令才能工作。因此，我更新了@return功能，并在其末尾添加了color-set。然后，我只需要给出一些指令，这样函数就不会被称为“突然出现”，所以我将@return $colors;变量分配给它就像这样：

$colors

我认为将$colors: color-set(bkgrnd, $color--deep-ocean);一直重新分配给自己可能有点重复，但鉴于这只会影响编译期间的性能，而不是影响我最终的CSS文件，我可以侥幸逃脱。可能有更好的方法（如果你有想法，我会全力以赴！）但是现在这很符合我的需求。

就这样，我能够使用地图处理我的颜色。感谢任何看过我的问题的人，并且抱歉发布这个 - 我应该花一些时间来冷静下来并考虑更多。我希望这可以帮助那些绊倒同一问题的人解决他们的问题！

小心，

克里斯

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

<强> _colors.scss

$colors

<强> _mixins.scss

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

<强> _variables.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);
    }
}

用法示例：

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

在SASS生成动态色彩地图

1 个答案: