SCSS комплекс / вложенная карта

Question

Я хочу создать код CSS из вложенной карты, но я могу получить доступ к аргументам и значениям. Я разместил карту здесь. Я хочу иметь разные классы. Они должны выглядеть следующим образом.

.is-fluid {
 width: 100%;
 height: auto;
 border-radius: 0;
}

и т.д ....

Я пробовал разные вещи, но не могу заставить его работать. Это вообще возможно? И как?

$images: (
    styles: (
        fluid: (
            'width': 100%,
            'height': auto,
            'border-radius': 0
        ),
        rounded: (
            'width': auto,
            'height': auto,
            'border-radius': .5rem
        ),
        circled: (
            'width': auto,
            'height': auto,
            'border-radius': 50%
        )
    )
)

Answer 1

Sass карты .

$images: (
    styles: (
        fluid: (
            'width': 100%,
            'height': auto,
            'border-radius': 0
        ),
        rounded: (
            'width': auto,
            'height': auto,
            'border-radius': .5rem
        ),
        circled: (
            'width': auto,
            'height': auto,
            'border-radius': 50%
        )
    )
);

@each $style-name, $style-content in map-get($images, 'styles') {
  .is-#{$style-name} {
    @each $key, $value in $style-content {
        #{$key}: #{$value}; 
    }
  }
}

Компилируется в:

.is-fluid {
  width: 100%;
  height: auto;
  border-radius: 0;
}

.is-rounded {
  width: auto;
  height: auto;
  border-radius: 0.5rem;
}

.is-circled {
  width: auto;
  height: auto;
  border-radius: 50%;
}