Raduken Raduken - 2 months ago 7
Sass (Sass) Question

sass palettes not working in a mixin

Someone can explain to me why my background colour in that mixin with palettes is not working properly?

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

}


result:

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


So when is rendered my bg does not apear someone know what it is happening?

Answer

I wrote a function palette that returns a key value from map.

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 output:

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