SASS\SCSS rgba混合无法识别颜色
SASS\SCSS rgba混合无法识别颜色
提问于 2018-06-07 03:07:50
因此，我有一个从地图获取颜色的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来编译。
如果有人能帮助我，我将不胜感激。
谢谢!
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-07 03:58:41
您没有$black和$white的完整级别列表。
因此，在@mixin generate-rounded-buttons中迭代颜色块时，您正在尝试调用coobo-color('white', 400)，这将返回null。并且null不能转换为颜色值。
或者附加所有可能的级别的颜色映射，或者进行检入混合功能，或者从映射中删除“不完整”的颜色。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50727876
复制相关文章
相似问题