为什么SASS\SCSS RGBA混合色不识别颜色?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (129)

我有一个coobo颜色函数,从地图中获取颜色。当我在函数后面使用颜色时,它工作正常:例如:background-color("blue", 400);。但是,当我在RGBA内部使用它时,它就会失效。

这是我的装置:

Coobo颜色变量:

$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);

共色函数

@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;

编译错误:

你可以检查代码页上的错误:https://codepen.io/anon/pen/pKEJem?editors=1100

我使用节点-sass与WebPack 4进行编译。

提问于
用户回答回答于

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

所以在迭代@mixin生成圆形按钮中的颜色块时,你尝试调用coobo-color('white',400),这将返回null。 并且null不能转换为颜色值。

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

扫码关注云+社区

领取腾讯云代金券