Как осветлить цветовую карту - нахально

Question

Я создал цветовую карту, как показано ниже, и собираюсь использовать lighten(color, amount) каждую кнопку при наведении на них курсора.

часть кода @each работает и отображает все цвета поверх неработающей секции при наведении.

`@each $button, $color in $button-colors{
    .btn#{$button}{
        background-color: $color;
    &:hover{
      background-color: lighten(get-map($button-colors), 15%);
    }
    }
  }`

`$button-colors:(
    '.default':#51ddfc,     
    '.error':  #e4757a,      
    '.info':   #927bc1,
    '.success':#63cc82,    
    '.warning':#fd7856,
);`

Спасибо

Answer 1

Вы ошиблись с функцией get-map. Прежде всего, это map-get, и у него есть 2 параметра $map и $key. Прочтите документы по адресу https://sass-lang.com/documentation/modules/map.

Нет необходимости использовать map-get, так как вы уже находитесь внутри l oop и имеете доступ к $color:

$button-colors: (
    '.default': #51ddfc,     
    '.error': #e4757a,      
    '.info': #927bc1,
    '.success': #63cc82,    
    '.warning': #fd7856
);

@each $button, $color in $button-colors{
  .btn#{$button}{
    background-color: $color;

    &:hover{
      background-color: lighten($color, 15%);
    }
  }
}