css - SASS\SCSS rgba mixin 无法识别颜色

Question

因此，我有一个从 map 获取颜色的 coobo-color 函数。当我在函数之后立即使用颜色时，它工作正常:例如:background-color("blue", 400);。但是，当我在 rgba 混合中使用它时，它会损坏。

这是我的设置:

coobo-colors 变量:

$red: ( 100: #ff3651, 200: #f21d3a, 300: #e6102d, 400: #cc0e28, 500: #b50c23, 600: #990a1e, 700: #690714, 800: #47050e, 900: #47050e, 1000: #47050e);
$green: ( 100: #2bff38, 200: #22f22e, 300: #14e621, 400: #12cc1d, 500: #10b51a, 600: #0e9916, 700: #0a690f, 800: #07470a, 900: #07470a, 1000: #07470a);
$yellow: ( 100: #ffe22e, 200: #f2d624, 300: #e6c917, 400: #d9be16, 500: #b59f12, 600: #99860f, 700: #695c0a, 800: #473f07, 900: #473f07, 1000: #473f07);
$coobo-blue: ( 100: #3de8ff, 200: #0cd7f2, 300: #00cae6, 400: #00abc2, 500: #009db5, 600: #008599, 700: #005b69, 800: #004752, 900: #002c33, 1000: #002329);
$blue: ( 100: #5cc2ff, 200: #47baff, 300: #30b2ff, 400: #15a4fa, 500: #0f77b5, 600: #0d6499, 700: #094569, 800: #062f47, 900: #062f47, 1000: #062f47);
$gray: ( 100: #ffffff, 200: #f2f2f2, 300: #e6e6e6, 400: #cccccc, 500: #b5b5b5, 600: #999999, 700: #696969, 800: #474747, 900: #474747, 1000: #474747);
$bluish-gray: ( 100: #f7fcfc, 200: #f8fafa, 300: #e6eff0, 400: #dfe7e8, 500: #d2dadb, 600: #c6cecf, 700: #bac1c2, 800: #a9afb0, 900: #96a2a3, 1000: #838e8f, 1100: #697273, 1200: #545b5c, 1300: #44494a);
$black: (100:#000);
$white: (100:#fff);
$coobo-colors: () !default;
$coobo-colors: map-merge( ( 'red': $red, 'green': $green, 'yellow': $yellow, 'coobo-blue': $coobo-blue, 'blue': $blue, 'gray': $gray, 'bluish-gray': $bluish-gray, 'black': $black, 'white': $white), $coobo-colors);

coobo-color 函数

@function coobo-color($color-name: 'coobo-blue', $level: 400) {
  $color: map-get($coobo-colors, $color-name);
  $color-shade: map-get($color, $level);
  @return $color-shade;
}

打印错误的语句:

@mixin generate-rounded-buttons {
  @each $color-name, $color in $coobo-colors {
    $color-0: coobo-color(#{$color-name}, 400);
    .btn-coobo-#{$color-name} {
      background-color: rgba($color-0, 0.2);
    }
  }
}

@include generate-rounded-buttons;

编译错误:

你可以在codepen上查看错误:https://codepen.io/anon/pen/pKEJem?editors=1100

我正在使用 node-sass 和 webpack 4 进行编译。

如果有人能帮助我，我将不胜感激。

谢谢!

Answer 1

您没有 $black 和 $white 的完整级别列表。

因此，在 @mixin generate-rounded-buttons 中迭代颜色 block 时，您尝试调用 coobo-color('white', 400) 并返回 空。而null不能转化为颜色值。

要么附加所有可能级别的颜色映射，要么检查混合函数，要么从映射中删除“不完整”的颜色。