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

【问题标题】：Is it possible to loop through multiple media queries with a SASS for loop?是否可以使用 SASS for 循环遍历多个媒体查询？
【发布时间】：2019-09-25 11:59:06
【问题描述】：

例如我有这样的代码

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

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

理想情况下，我可以将它们放入一个运行每个断点（小、中、大等）的函数中。

【问题讨论】：

标签： css sass

【解决方案1】：

您可以将断点放入一个列表中，然后遍历该列表。

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

This answer 很有帮助。

【讨论】：

好东西！谢谢。