Css 是否可以使用SASS for循环遍历多个媒体查询？

例如，我有这样的代码

@for $i from 1 through 100 {
  .t-#{$i} {
    top: 1% * $i;
  }
}

但我有6组媒体查询，我想将其应用于。例如，这里有两个：

@media #{$breakpoint-small} { 
  @for $i from 1 through 100 {
    .t-#{$i} {
      top: 1% * $i;
    }
  }
}

---

理想情况下，我可以将这些断点放在一个函数中，该函数可以运行小断点、中断点、大断点等。您可以将断点放在一个列表中，然后遍历该列表

$breakpoints:(
  large: 'min-width: 900px',
  medium: 'min-width: 600px',
  small: 'min-width: none'
);

@each $key,$val in $breakpoints{
  @media (#{$val}) { 
    @for $i from 1 through 100 {
      .t-#{$i} {
        top: 1% * $i;
      }
    }
  }
}

---

很有帮助。

很棒的东西！谢谢

$breakpoints:(
  large: 'min-width: 900px',
  medium: 'min-width: 600px',
  small: 'min-width: none'
);

@each $key,$val in $breakpoints{
  @media (#{$val}) { 
    @for $i from 1 through 100 {
      .t-#{$i} {
        top: 1% * $i;
      }
    }
  }
}