Double iteration with less

@breakpoints: "xs", "sm", "md", "lg", "xl";

.loopBreakpoints(@ix) when (@ix > 0) {

  @name: extract(@breakpoints, @ix);
  @id: ~"@{name}";

  @iterations: 25;

  .mixin-loop (@i) when (@i > 0) {

    .image-cover-@{id}-@{i} {
        height: ~"@{i}vw";
        width: auto;
        object-fit: cover;
     }

     @media (max-width: 575px) {
       .image-cover-@{id}-@{i} {
          height: ~"@{i}vw";
          width: auto;
          object-fit: cover;
       }
     }

     .mixin-loop(@i - 1);

  }

  .mixin-loop(@iterations);

}

.loopBreakpoints(length(@grid-breakpoints));

Result

.image-cover-xl-25 {
  height: 25vw;
  width: auto;
  object-fit: cover;
}
@media (max-width: 575px) {
  .image-cover-xl-25 {
    height: 25vw;
    width: auto;
    object-fit: cover;
  }
}
@media (min-width: 576px) {
  .image-cover-xl-25 {
    height: 25vw;
    width: auto;
    object-fit: cover;
  }
}
/* medium */
@media (min-width: 768px) {
  .image-cover-xl-25 {
    height: 25vw;
    width: auto;
    object-fit: cover;
  }
}
... etc ...

Less online tester

Last update: Tue, 13 Sep 2022 14:32:15