Прокручивать вложенные 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);
      }     
    }
  }
}