html - 在 sass 中使用 map、list 和 for 循环更改元素的字体大小

Question

我必须从地图到列表中获取值，然后使用 for 循环中列表中的值更改 h1、h2、h3 的字体大小。我的代码如下所示：

$font-sizes: (
  fs1: 100px,
  fs2: 50px,
  fs3: 6px
);

$list-of-font-sizes: map-values($font-sizes);

@for $i from 1 through 3 {
  h#{$i} {
    @each $size in $list-of-font-sizes {
      font-size: $size;
    }
  }
}

它不起作用，我不知道为什么。我也试过这样：

@each $size in $list-of-font-sizes {
  @for $i from 1 through 3 {
    h#{$i} {
      font-size: $size;
    }
  }
}

标签： htmlcssfor-loopsass

Answer 1

你可以使用@for循环。
然后，您使用它的索引nth来获取每个大小。

@for $i from 1 through length($list-of-font-sizes) {
  h#{$i} {
    font-size: nth($list-of-font-sizes, $i);
  }
}