sass палитры не работают в mixin

Question

Кто-то может объяснить мне, почему мой фоновый цвет в этом миксере с палитрами работает неправильно?

// UI Colors 

// Call the color palette modifiers in color values 
@function palette($palette, $shade: 'base') { 
    @return map-get(map-get($color-palettes, $palette), $shade); 
} 

$white: #fff; 
$black: #0b0b0b; 
$grey : #797e83; 

$color-palettes: (
    grey: (
     xx-light : lighten($grey, 43%), 
     x-light : lighten($grey, 35%), 
     light : lighten($grey, 12%), 
     base  : $grey, 
     dark  : darken($grey, 8%), 
     x-dark : darken($grey, 16%) 
    ), 
    black: (
     light : lighten($black, 10%), 
     base : $black, 
     dark : darken($black, 10%) 
    ) 
); 

$ui-colors: (
    sidebar-close : $white, 
    filter-close : $white, 
    search-close : palette(black, dark), 
); 

// Generate modifier color classes 
@mixin bg-colors($map) { 
    @each $theme, $color in $map { 
    &-#{$theme} { 
     background-color: $color; 
    } 
    } 
} 

.btn { 
    @include colors($ui-colors); 

} 

результат:

.btn-search-open { 
    background-color: invalid not working; 
} 

Так что, когда визуализируется мой BG не кто-нибудь знает появляться то, что это происходит?

Answer 1

Я написал функцию palette, которая возвращает значение ключа из карты.

Sassmeister demo.

SCSS:

$white : #fff; 
$black : #0b0b0b; 
$grey : #797e83; 

$color-palettes: (
    grey: (
     xx-light : lighten($grey, 43%), 
     x-light : lighten($grey, 35%), 
     light : lighten($grey, 12%), 
     base  : $grey, 
     dark  : darken($grey, 8%), 
     x-dark : darken($grey, 16%) 
    ), 
    black: (
     light : lighten($black, 10%), 
     base : $black, 
     dark : darken($black, 10%) 
    ) 
); 

@function palette($palettes, $palette, $tone: 'base') { 
    @return map-get(map-get($palettes, $palette), $tone); 
} 

$ui-colors: (
    sidebar-close : $white, 
    filter-close : $white, 
    search-close : palette($color-palettes, black, dark) 
); 

@mixin bg-colors($map) { 
    @each $theme-name, $theme in $map { 
    &-#{$theme-name} { 
     background-color: $theme; 
    } 
    } 
} 

.btn { 
    @include bg-colors($ui-colors); 
} 

выход Css:

.btn-sidebar-close { 
    background-color: #fff; 
} 
.btn-filter-close { 
    background-color: #fff; 
} 
.btn-search-close { 
    background-color: black; 
}