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 maps.

$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%;
}