Можно ли пройти через несколько медиа-запросов с циклом 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;
    }
  }
}

В идеале я мог бы поместить их в функцию, которая запускает каждую из точек останова, маленькую, среднюю, большую и т. Д.

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

Этот ответ был полезен.