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

Question

例如我有看起来像这样的代码

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

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

标签： csssass

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

这个答案很有帮助。