SCSS复杂/嵌套地图

时间:2019-06-13 12:29:11

标签: sass

我想从嵌套映射中生成一些CSS代码,但是我可以访问参数和值。我已经在这里贴了地图。我想上不同的课。他们应该看起来像这样。

$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%
        )
    )
)

等...

我尝试了其他操作,但无法运行。 这有可能吗?又如何?

a = np.random.rand(1000000, 10)
second = np.random.rand(5000, 10)
third = np.random.rand(4000, 10)
if second:
    new = np.empty([len(a)+len(second), a.shape[1]])
    new[:len(a)] = a
    new[len(a):] = second
if third:
    new = np.empty([len(a)+len(third), a.shape[1]])
    new[:len(a)] = a
    new[len(a):] = third

1 个答案:

答案 0 :(得分:0)

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