@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));
.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 ...