Question

所以，我有一个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

我正在使用带有webpack 4的node-sass进行编译。

如果有人可以帮助我，我们将非常感激。

谢谢！

Answer 1

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

因此，在迭代@mixin generate-rounded-buttons中的颜色块时，您尝试调用coobo-color('white', 400)并返回null。并且null无法转换为颜色值。

使用所有级别追加颜色贴图，或者检查mixin函数，或从地图中删除“不完整”颜色。

SASS \ SCSS rgba mixin不识别颜色

1 个答案: