如何在SCSS中获得2D或3D地图的价值

Question

我知道可以通过map-get()函数获得1D地图的价值，但不知道如何在此地图中获得类似'header'的值：

 $mobile-layout: (
   layout-values: (
     header: (
       height: 72px
     ),
     sidebar: (
       width: 100%
     )
   )
);

Answer 1

我有几个嵌套循环解决方案......

DEMO

3个循环

@each $key, $val in $mobile-layout {
  @each $k, $v in $val {
    @each $l, $t in $v {
      .#{$k} {
        .#{$l}: #{$t};
      }
    }
  }
}

2个循环

@each $key, $val in $mobile-layout {
  @each $k, $v in $val {
    .#{$k} {
      .#{map-keys($v)}: #{map-values($v)};
    }
  }
}