如何使用更少的方法创建列类并使用响应循环？

Question

我没有尝试使用less和loop创建列类，但是我将使用min媒体查询来实现不同的区别，但是我想使用esay方法来创建具有响应的列类，请帮助我。感谢Adavance

@cols: 12;
@media all and (min-width: 1200px) {
    .generateCols(@counter) when (@counter > 0) {
        @width: (@counter / @cols ) * 100;
        .col-xl-@{counter} {
            width: ~"@{width}%";
        }
        .generateCols((@counter - 1));
    }
    .generateCols(12); 
}
@media all and (min-width: 992px) {
    .generateCols(@counter) when (@counter > 0) {
        @width: (@counter / @cols ) * 100;
        .col-lg-@{counter} {
            width: ~"@{width}%";
        }
        .generateCols((@counter - 1));
    }
    .generateCols(12); 
}
@media all and (min-width: 768px) {
    .generateCols(@counter) when (@counter > 0) {
        @width: (@counter / @cols ) * 100;
        .col-md-@{counter} {
            width: ~"@{width}%";
        }
        .generateCols((@counter - 1));
    }
    .generateCols(12); 
}
@media all and (min-width: 0) {
    .generateCols(@counter) when (@counter > 0) {
        @width: (@counter / @cols ) * 100;
        .col-xs-@{counter} {
            width: ~"@{width}%";
        }
        .generateCols((@counter - 1));
    }
    .generateCols(12); 
}