在SASS中生成动态彩色地图

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：

“... ackground color”之后无效的CSS：预期1选择器或at-rule，是“color-set（bkgrnd，$”

所以我觉得我错过了一些东西。我已经把脑袋缠绕了四个小时，而且我疯了。这可能是超级简单的东西，但我似乎无法弄清楚。我随便使用SASS，所以我可能不知道一些语法问题，但如果任何人有关于如何解决这个问题的线索，我会非常感激。

祝您有美好的一天，感谢您花时间阅读我的文章！

的问候， 克里斯

PS：我与支架SASS插件支架编译此，即使有这些信息是相关的。

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