Итак, у меня есть функция 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. для компиляции.
Если кто-нибудь может мне помочь, это будет в значительной степени оценено.
Спасибо!