合并两个颜色函数 SASS

Question

我有两个 SASS 函数做同样的事情，但有一些不同。第一个函数迭代地图，然后returns一个简短的记录，以便您可以方便地使用带有颜色和透明度的作品

// map
$colors: (
    primary: #06285c,
    seconadary: #96ccff,
    tertiary: #357edd,
    accent: #ff6300,
    info: #a463f2,
    success: #19a974,
    warning: #ffde37,
    danger: hsl(8deg 100% 61%)
);

@function color($key: primary, $opacity: 1) {
    @return rgba(map-get($colors, $key), $opacity); 
}

// sass style
background-color: color(warning, 0.6);

// compile to
background-color: rgba(255,0,0,.6);

我的第二个函数旨在使用输入的任何颜色而无需依赖地图

@function color-custom($key: primary, $opacity: 1) {
    $color: color($key);
    @return rgba($color, $opacity);
}

// sass style
background-color: color-custom(#ff0000, 0.6);

// compile to
background-color: rgba(255,0,0,.6);

我只想将这两个功能合二为一。我不知道这是否可行，以及如何检查函数内部的依赖关系。同时，这些函数不能存在，它们会报错。因此，如果可能的话，我想简单地团结他们。

Answer 1

您可以通过 map-has-key and then set a condition 到 return 检查您的地图中是否存在 $key 正确的结果：

@function get-color($key: primary, $opacity: 1) {
    $color: if(map-has-key($colors, $key), map-get($colors, $key), $key);
    @return rgba($color, $opacity);
}

合并两个颜色函数 SASS

Combine two color functions SASS

css

sass