Прокручивать вложенные SASS Maps для создания классов

Question

Я пытаюсь перебрать вложенные карты sass для создания классов кнопок. Это возможно?

мои карты вложены так:

$buttons: (
 primary: (
  border: 1px solid #ccc,
  border-hover: 1px solid #ccc,
  color: red,
  color-hover: blue
 ),
 secondary: (
  border: 1px solid #ccc,
  border-hover: 1px solid #ccc,
  color: red,
  color-hover: blue
 )
);

Когда я пытаюсь пройти через него с каждым циклом, я просто получаю первый слой карты.

чего я хочу добиться, так это чтобы все необходимые классы создавались с соответствующими значениями. вот пример:

.button {
 
 &.primary {
  border: [border];
  color: [color];

  &:hover {
   border: [border-hover];
   color: [color-hover];
  }  
 }
 &.secondary {
  border: [border];
  color: [color];

  &:hover {
   border: [border-hover];
   color: [color-hover];
  }  
 }

 
}

Я рад за каждый полезный совет:)

Answer 1

Это на самом деле довольно тривиально и просто. Все, что вам нужно сделать, это использовать @each Зацикливайте свою карту и извлекайте значения, используя функции карты.

.button {
  @each $type, $styles in $buttons {
    &.#{$type} {
      border: map-get($styles, border);
      color: map-get($styles, color);

      &:hover {
        border: map-get($styles, border-hover);
        color: map-get($styles, color-hover);
      }     
    }
  }
}