Question

我正在尝试为CSS创建生成的间距类。我有一些嵌入式循环可以创建此循环，而在外循环内部，可以定义媒体查询。我有一组内部样式正在循环浏览，并放置在3个媒体查询的每个内部。

由于某种原因，当媒体查询被循环通过时，它会添加前一个变量并为每个媒体查询附加“和”，因此我的页面如下所示：

@media (max-width: 991px) {...}
@media (max-width: 991px) and (max-width: 767px) {...}
@media (max-width: 991px) and (max-width: 767px) and (max-width: 480px) {...}

何时应如下所示：

@media (max-width: 991px) {...}
@media (max-width: 767px) {...}
@media (max-width: 480px) {...}

我添加了其他CSS属性来代替@media，以查看是否是@media的问题，但似乎在我的循环中仍然存在。（仅供参考，我使用的是Less版本 3.0 ）

较少

@screen-xs-min: 480px;
@screen-sm-min: 768px;
@screen-md-min: 992px;
@screen-lg-min: 1200px;
@screen-xl-min: 1340px;

@screen-xs-max: (@screen-sm-min - 1);
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);

@directionlist: l, b, r, t;
@directions: left, bottom, right, top;
@spacingtype: padding, margin;
@sapcingtypeabv: p, m;
@responsivevars: screen-xs-min, screen-xs-max, screen-sm-max;
@responsivevarsabv: xs, sm, md;

@maxg: 3;
.g-loop (@g) when (@g > 0) {

    @responsive: extract(@responsivevars, @g);
    @responsiveabv: extract(@responsivevarsabv, @g);

    @media (max-width: @@responsive) {

    @maxh: 2;
    .h-loop (@h) when (@h > 0) {

        @maxi: 50;
        .i-loop (@i) when (@i > -1) {

            @maxj: 4;
            .j-loop (@j) when (@j > 0) {

                @direction: extract(@directionlist, @j);
                @directionname: extract(@directions, @j);
                @type: extract(@spacingtype, @h);
                @typeabv: extract(@sapcingtypeabv, @h);

                .@{typeabv}-@{responsiveabv}-@{direction}-@{i} {
                    @{type}-@{directionname}: @i*1px !important;
                }

                .j-loop(@j - 1);
            }

            .j-loop (0) {}
            .j-loop(@maxj);

            .i-loop(@i - 5);
        }

        .i-loop (0) {}
        .i-loop(@maxi);
        .h-loop(@h - 1);
    }

    .h-loop (0) {}
    .h-loop(@maxh);
    .g-loop(@g - 1);
    } //Closing Media Query
}

.g-loop (0) {}
.g-loop(@maxg);

您可以使用 LESS Tester 查看编译结果。

生成的CSS

@media (max-width: 991px) {
  .m-md-t-50 {
    margin-top: 50px !important;
  }
  .m-md-r-50 {
    margin-right: 50px !important;
  }
  .m-md-b-50 {
    margin-bottom: 50px !important;
  }
  .m-md-l-50 {
    margin-left: 50px !important;
  }
  .m-md-t-45 {
    margin-top: 45px !important;
  }
  .m-md-r-45 {
    margin-right: 45px !important;
  }
  .m-md-b-45 {
    margin-bottom: 45px !important;
  }
  .m-md-l-45 {
    margin-left: 45px !important;
  }
  .m-md-t-40 {
    margin-top: 40px !important;
  }
  .m-md-r-40 {
    margin-right: 40px !important;
  }
  .m-md-b-40 {
    margin-bottom: 40px !important;
  }
  .m-md-l-40 {
    margin-left: 40px !important;
  }
  .m-md-t-35 {
    margin-top: 35px !important;
  }
  .m-md-r-35 {
    margin-right: 35px !important;
  }
  .m-md-b-35 {
    margin-bottom: 35px !important;
  }
  .m-md-l-35 {
    margin-left: 35px !important;
  }
  .m-md-t-30 {
    margin-top: 30px !important;
  }
  .m-md-r-30 {
    margin-right: 30px !important;
  }
  .m-md-b-30 {
    margin-bottom: 30px !important;
  }
  .m-md-l-30 {
    margin-left: 30px !important;
  }
  .m-md-t-25 {
    margin-top: 25px !important;
  }
  .m-md-r-25 {
    margin-right: 25px !important;
  }
  .m-md-b-25 {
    margin-bottom: 25px !important;
  }
  .m-md-l-25 {
    margin-left: 25px !important;
  }
  .m-md-t-20 {
    margin-top: 20px !important;
  }
  .m-md-r-20 {
    margin-right: 20px !important;
  }
  .m-md-b-20 {
    margin-bottom: 20px !important;
  }
  .m-md-l-20 {
    margin-left: 20px !important;
  }
  .m-md-t-15 {
    margin-top: 15px !important;
  }
  .m-md-r-15 {
    margin-right: 15px !important;
  }
  .m-md-b-15 {
    margin-bottom: 15px !important;
  }
  .m-md-l-15 {
    margin-left: 15px !important;
  }
  .m-md-t-10 {
    margin-top: 10px !important;
  }
  .m-md-r-10 {
    margin-right: 10px !important;
  }
  .m-md-b-10 {
    margin-bottom: 10px !important;
  }
  .m-md-l-10 {
    margin-left: 10px !important;
  }
  .m-md-t-5 {
    margin-top: 5px !important;
  }
  .m-md-r-5 {
    margin-right: 5px !important;
  }
  .m-md-b-5 {
    margin-bottom: 5px !important;
  }
  .m-md-l-5 {
    margin-left: 5px !important;
  }
  .m-md-t-0 {
    margin-top: 0px !important;
  }
  .m-md-r-0 {
    margin-right: 0px !important;
  }
  .m-md-b-0 {
    margin-bottom: 0px !important;
  }
  .m-md-l-0 {
    margin-left: 0px !important;
  }
  .p-md-t-50 {
    padding-top: 50px !important;
  }
  .p-md-r-50 {
    padding-right: 50px !important;
  }
  .p-md-b-50 {
    padding-bottom: 50px !important;
  }
  .p-md-l-50 {
    padding-left: 50px !important;
  }
  .p-md-t-45 {
    padding-top: 45px !important;
  }
  .p-md-r-45 {
    padding-right: 45px !important;
  }
  .p-md-b-45 {
    padding-bottom: 45px !important;
  }
  .p-md-l-45 {
    padding-left: 45px !important;
  }
  .p-md-t-40 {
    padding-top: 40px !important;
  }
  .p-md-r-40 {
    padding-right: 40px !important;
  }
  .p-md-b-40 {
    padding-bottom: 40px !important;
  }
  .p-md-l-40 {
    padding-left: 40px !important;
  }
  .p-md-t-35 {
    padding-top: 35px !important;
  }
  .p-md-r-35 {
    padding-right: 35px !important;
  }
  .p-md-b-35 {
    padding-bottom: 35px !important;
  }
  .p-md-l-35 {
    padding-left: 35px !important;
  }
  .p-md-t-30 {
    padding-top: 30px !important;
  }
  .p-md-r-30 {
    padding-right: 30px !important;
  }
  .p-md-b-30 {
    padding-bottom: 30px !important;
  }
  .p-md-l-30 {
    padding-left: 30px !important;
  }
  .p-md-t-25 {
    padding-top: 25px !important;
  }
  .p-md-r-25 {
    padding-right: 25px !important;
  }
  .p-md-b-25 {
    padding-bottom: 25px !important;
  }
  .p-md-l-25 {
    padding-left: 25px !important;
  }
  .p-md-t-20 {
    padding-top: 20px !important;
  }
  .p-md-r-20 {
    padding-right: 20px !important;
  }
  .p-md-b-20 {
    padding-bottom: 20px !important;
  }
  .p-md-l-20 {
    padding-left: 20px !important;
  }
  .p-md-t-15 {
    padding-top: 15px !important;
  }
  .p-md-r-15 {
    padding-right: 15px !important;
  }
  .p-md-b-15 {
    padding-bottom: 15px !important;
  }
  .p-md-l-15 {
    padding-left: 15px !important;
  }
  .p-md-t-10 {
    padding-top: 10px !important;
  }
  .p-md-r-10 {
    padding-right: 10px !important;
  }
  .p-md-b-10 {
    padding-bottom: 10px !important;
  }
  .p-md-l-10 {
    padding-left: 10px !important;
  }
  .p-md-t-5 {
    padding-top: 5px !important;
  }
  .p-md-r-5 {
    padding-right: 5px !important;
  }
  .p-md-b-5 {
    padding-bottom: 5px !important;
  }
  .p-md-l-5 {
    padding-left: 5px !important;
  }
  .p-md-t-0 {
    padding-top: 0px !important;
  }
  .p-md-r-0 {
    padding-right: 0px !important;
  }
  .p-md-b-0 {
    padding-bottom: 0px !important;
  }
  .p-md-l-0 {
    padding-left: 0px !important;
  }
}
@media (max-width: 991px) and (max-width: 767px) {
  .m-sm-t-50 {
    margin-top: 50px !important;
  }
  .m-sm-r-50 {
    margin-right: 50px !important;
  }
  .m-sm-b-50 {
    margin-bottom: 50px !important;
  }
  .m-sm-l-50 {
    margin-left: 50px !important;
  }
  .m-sm-t-45 {
    margin-top: 45px !important;
  }
  .m-sm-r-45 {
    margin-right: 45px !important;
  }
  .m-sm-b-45 {
    margin-bottom: 45px !important;
  }
  .m-sm-l-45 {
    margin-left: 45px !important;
  }
  .m-sm-t-40 {
    margin-top: 40px !important;
  }
  .m-sm-r-40 {
    margin-right: 40px !important;
  }
  .m-sm-b-40 {
    margin-bottom: 40px !important;
  }
  .m-sm-l-40 {
    margin-left: 40px !important;
  }
  .m-sm-t-35 {
    margin-top: 35px !important;
  }
  .m-sm-r-35 {
    margin-right: 35px !important;
  }
  .m-sm-b-35 {
    margin-bottom: 35px !important;
  }
  .m-sm-l-35 {
    margin-left: 35px !important;
  }
  .m-sm-t-30 {
    margin-top: 30px !important;
  }
  .m-sm-r-30 {
    margin-right: 30px !important;
  }
  .m-sm-b-30 {
    margin-bottom: 30px !important;
  }
  .m-sm-l-30 {
    margin-left: 30px !important;
  }
  .m-sm-t-25 {
    margin-top: 25px !important;
  }
  .m-sm-r-25 {
    margin-right: 25px !important;
  }
  .m-sm-b-25 {
    margin-bottom: 25px !important;
  }
  .m-sm-l-25 {
    margin-left: 25px !important;
  }
  .m-sm-t-20 {
    margin-top: 20px !important;
  }
  .m-sm-r-20 {
    margin-right: 20px !important;
  }
  .m-sm-b-20 {
    margin-bottom: 20px !important;
  }
  .m-sm-l-20 {
    margin-left: 20px !important;
  }
  .m-sm-t-15 {
    margin-top: 15px !important;
  }
  .m-sm-r-15 {
    margin-right: 15px !important;
  }
  .m-sm-b-15 {
    margin-bottom: 15px !important;
  }
  .m-sm-l-15 {
    margin-left: 15px !important;
  }
  .m-sm-t-10 {
    margin-top: 10px !important;
  }
  .m-sm-r-10 {
    margin-right: 10px !important;
  }
  .m-sm-b-10 {
    margin-bottom: 10px !important;
  }
  .m-sm-l-10 {
    margin-left: 10px !important;
  }
  .m-sm-t-5 {
    margin-top: 5px !important;
  }
  .m-sm-r-5 {
    margin-right: 5px !important;
  }
  .m-sm-b-5 {
    margin-bottom: 5px !important;
  }
  .m-sm-l-5 {
    margin-left: 5px !important;
  }
  .m-sm-t-0 {
    margin-top: 0px !important;
  }
  .m-sm-r-0 {
    margin-right: 0px !important;
  }
  .m-sm-b-0 {
    margin-bottom: 0px !important;
  }
  .m-sm-l-0 {
    margin-left: 0px !important;
  }
  .p-sm-t-50 {
    padding-top: 50px !important;
  }
  .p-sm-r-50 {
    padding-right: 50px !important;
  }
  .p-sm-b-50 {
    padding-bottom: 50px !important;
  }
  .p-sm-l-50 {
    padding-left: 50px !important;
  }
  .p-sm-t-45 {
    padding-top: 45px !important;
  }
  .p-sm-r-45 {
    padding-right: 45px !important;
  }
  .p-sm-b-45 {
    padding-bottom: 45px !important;
  }
  .p-sm-l-45 {
    padding-left: 45px !important;
  }
  .p-sm-t-40 {
    padding-top: 40px !important;
  }
  .p-sm-r-40 {
    padding-right: 40px !important;
  }
  .p-sm-b-40 {
    padding-bottom: 40px !important;
  }
  .p-sm-l-40 {
    padding-left: 40px !important;
  }
  .p-sm-t-35 {
    padding-top: 35px !important;
  }
  .p-sm-r-35 {
    padding-right: 35px !important;
  }
  .p-sm-b-35 {
    padding-bottom: 35px !important;
  }
  .p-sm-l-35 {
    padding-left: 35px !important;
  }
  .p-sm-t-30 {
    padding-top: 30px !important;
  }
  .p-sm-r-30 {
    padding-right: 30px !important;
  }
  .p-sm-b-30 {
    padding-bottom: 30px !important;
  }
  .p-sm-l-30 {
    padding-left: 30px !important;
  }
  .p-sm-t-25 {
    padding-top: 25px !important;
  }
  .p-sm-r-25 {
    padding-right: 25px !important;
  }
  .p-sm-b-25 {
    padding-bottom: 25px !important;
  }
  .p-sm-l-25 {
    padding-left: 25px !important;
  }
  .p-sm-t-20 {
    padding-top: 20px !important;
  }
  .p-sm-r-20 {
    padding-right: 20px !important;
  }
  .p-sm-b-20 {
    padding-bottom: 20px !important;
  }
  .p-sm-l-20 {
    padding-left: 20px !important;
  }
  .p-sm-t-15 {
    padding-top: 15px !important;
  }
  .p-sm-r-15 {
    padding-right: 15px !important;
  }
  .p-sm-b-15 {
    padding-bottom: 15px !important;
  }
  .p-sm-l-15 {
    padding-left: 15px !important;
  }
  .p-sm-t-10 {
    padding-top: 10px !important;
  }
  .p-sm-r-10 {
    padding-right: 10px !important;
  }
  .p-sm-b-10 {
    padding-bottom: 10px !important;
  }
  .p-sm-l-10 {
    padding-left: 10px !important;
  }
  .p-sm-t-5 {
    padding-top: 5px !important;
  }
  .p-sm-r-5 {
    padding-right: 5px !important;
  }
  .p-sm-b-5 {
    padding-bottom: 5px !important;
  }
  .p-sm-l-5 {
    padding-left: 5px !important;
  }
  .p-sm-t-0 {
    padding-top: 0px !important;
  }
  .p-sm-r-0 {
    padding-right: 0px !important;
  }
  .p-sm-b-0 {
    padding-bottom: 0px !important;
  }
  .p-sm-l-0 {
    padding-left: 0px !important;
  }
}
@media (max-width: 991px) and (max-width: 767px) and (max-width: 480px) {
  .m-xs-t-50 {
    margin-top: 50px !important;
  }
  .m-xs-r-50 {
    margin-right: 50px !important;
  }
  .m-xs-b-50 {
    margin-bottom: 50px !important;
  }
  .m-xs-l-50 {
    margin-left: 50px !important;
  }
  .m-xs-t-45 {
    margin-top: 45px !important;
  }
  .m-xs-r-45 {
    margin-right: 45px !important;
  }
  .m-xs-b-45 {
    margin-bottom: 45px !important;
  }
  .m-xs-l-45 {
    margin-left: 45px !important;
  }
  .m-xs-t-40 {
    margin-top: 40px !important;
  }
  .m-xs-r-40 {
    margin-right: 40px !important;
  }
  .m-xs-b-40 {
    margin-bottom: 40px !important;
  }
  .m-xs-l-40 {
    margin-left: 40px !important;
  }
  .m-xs-t-35 {
    margin-top: 35px !important;
  }
  .m-xs-r-35 {
    margin-right: 35px !important;
  }
  .m-xs-b-35 {
    margin-bottom: 35px !important;
  }
  .m-xs-l-35 {
    margin-left: 35px !important;
  }
  .m-xs-t-30 {
    margin-top: 30px !important;
  }
  .m-xs-r-30 {
    margin-right: 30px !important;
  }
  .m-xs-b-30 {
    margin-bottom: 30px !important;
  }
  .m-xs-l-30 {
    margin-left: 30px !important;
  }
  .m-xs-t-25 {
    margin-top: 25px !important;
  }
  .m-xs-r-25 {
    margin-right: 25px !important;
  }
  .m-xs-b-25 {
    margin-bottom: 25px !important;
  }
  .m-xs-l-25 {
    margin-left: 25px !important;
  }
  .m-xs-t-20 {
    margin-top: 20px !important;
  }
  .m-xs-r-20 {
    margin-right: 20px !important;
  }
  .m-xs-b-20 {
    margin-bottom: 20px !important;
  }
  .m-xs-l-20 {
    margin-left: 20px !important;
  }
  .m-xs-t-15 {
    margin-top: 15px !important;
  }
  .m-xs-r-15 {
    margin-right: 15px !important;
  }
  .m-xs-b-15 {
    margin-bottom: 15px !important;
  }
  .m-xs-l-15 {
    margin-left: 15px !important;
  }
  .m-xs-t-10 {
    margin-top: 10px !important;
  }
  .m-xs-r-10 {
    margin-right: 10px !important;
  }
  .m-xs-b-10 {
    margin-bottom: 10px !important;
  }
  .m-xs-l-10 {
    margin-left: 10px !important;
  }
  .m-xs-t-5 {
    margin-top: 5px !important;
  }
  .m-xs-r-5 {
    margin-right: 5px !important;
  }
  .m-xs-b-5 {
    margin-bottom: 5px !important;
  }
  .m-xs-l-5 {
    margin-left: 5px !important;
  }
  .m-xs-t-0 {
    margin-top: 0px !important;
  }
  .m-xs-r-0 {
    margin-right: 0px !important;
  }
  .m-xs-b-0 {
    margin-bottom: 0px !important;
  }
  .m-xs-l-0 {
    margin-left: 0px !important;
  }
  .p-xs-t-50 {
    padding-top: 50px !important;
  }
  .p-xs-r-50 {
    padding-right: 50px !important;
  }
  .p-xs-b-50 {
    padding-bottom: 50px !important;
  }
  .p-xs-l-50 {
    padding-left: 50px !important;
  }
  .p-xs-t-45 {
    padding-top: 45px !important;
  }
  .p-xs-r-45 {
    padding-right: 45px !important;
  }
  .p-xs-b-45 {
    padding-bottom: 45px !important;
  }
  .p-xs-l-45 {
    padding-left: 45px !important;
  }
  .p-xs-t-40 {
    padding-top: 40px !important;
  }
  .p-xs-r-40 {
    padding-right: 40px !important;
  }
  .p-xs-b-40 {
    padding-bottom: 40px !important;
  }
  .p-xs-l-40 {
    padding-left: 40px !important;
  }
  .p-xs-t-35 {
    padding-top: 35px !important;
  }
  .p-xs-r-35 {
    padding-right: 35px !important;
  }
  .p-xs-b-35 {
    padding-bottom: 35px !important;
  }
  .p-xs-l-35 {
    padding-left: 35px !important;
  }
  .p-xs-t-30 {
    padding-top: 30px !important;
  }
  .p-xs-r-30 {
    padding-right: 30px !important;
  }
  .p-xs-b-30 {
    padding-bottom: 30px !important;
  }
  .p-xs-l-30 {
    padding-left: 30px !important;
  }
  .p-xs-t-25 {
    padding-top: 25px !important;
  }
  .p-xs-r-25 {
    padding-right: 25px !important;
  }
  .p-xs-b-25 {
    padding-bottom: 25px !important;
  }
  .p-xs-l-25 {
    padding-left: 25px !important;
  }
  .p-xs-t-20 {
    padding-top: 20px !important;
  }
  .p-xs-r-20 {
    padding-right: 20px !important;
  }
  .p-xs-b-20 {
    padding-bottom: 20px !important;
  }
  .p-xs-l-20 {
    padding-left: 20px !important;
  }
  .p-xs-t-15 {
    padding-top: 15px !important;
  }
  .p-xs-r-15 {
    padding-right: 15px !important;
  }
  .p-xs-b-15 {
    padding-bottom: 15px !important;
  }
  .p-xs-l-15 {
    padding-left: 15px !important;
  }
  .p-xs-t-10 {
    padding-top: 10px !important;
  }
  .p-xs-r-10 {
    padding-right: 10px !important;
  }
  .p-xs-b-10 {
    padding-bottom: 10px !important;
  }
  .p-xs-l-10 {
    padding-left: 10px !important;
  }
  .p-xs-t-5 {
    padding-top: 5px !important;
  }
  .p-xs-r-5 {
    padding-right: 5px !important;
  }
  .p-xs-b-5 {
    padding-bottom: 5px !important;
  }
  .p-xs-l-5 {
    padding-left: 5px !important;
  }
  .p-xs-t-0 {
    padding-top: 0px !important;
  }
  .p-xs-r-0 {
    padding-right: 0px !important;
  }
  .p-xs-b-0 {
    padding-bottom: 0px !important;
  }
  .p-xs-l-0 {
    padding-left: 0px !important;
  }
}

这是我第一次大量使用Less逻辑，所以请告诉我是否有更好的做事方法。

Answer 1

主要建议：

请改用`each`函数。

因为无论如何您都使用Less 3.x （然后没有真正的理由不升级到 3.7 ，因为3. *之间没有重大的更改。*版本）-没有理由为琐碎的循环而烦恼递归mixins。递归mixin循环仅在生成“递归值”时才有用，即在每个新迭代需要重用prev生成的值时。迭代-这是each做不到的事情。

无论哪种方式，让我们看看您的示例有什么问题-仅供参考。

您的主要错误是您将媒体查询（例如.g-loop(@g - 1);）的“下一次呼叫”放置在错误的位置。基本上，您将其放置在媒体查询块的内部内，而应将其放置在外部内。因此，它们在结果中相互嵌套也就不足为奇了。
让我们从一个简化的示例开始（只是以相同的方式实现单级循环）：

.outer-iter(@i) when (@i > 0) {
    block {
        .outer-iter(@i - 1);
        itick: @i;
    }
}

.outer-iter(3);

这将产生类似的内容：

block {
  itick: 3;
}
block block {
  itick: 2;
}
block block block {
  itick: 1;
}

正是因为每个新的block都是在前一个内部生成的。
在这种情况下，正确的循环代码应为：

.outer-iter(@i) when (@i > 0) {
    .outer-iter(@i - 1);
    block {
        itick: @i;
    }
}

还有一些外观上的错误（虽然不是很有害的错误，但仍然如此）表明您使用了一些石器时代的教程（大约6岁左右）。简要地：

使用.*-loop (0) {}终端-暂时不需要（只是噪音）
硬编码的n迭代值-每次数据更改时，您都必须查找并修复它们。请改用length函数。

好吧，我不会为您带来其他外观问题（是的，还有其他一些问题），让我们从（某种）固定代码开始：


...

@max-pm-size: 50;

.g-loop(@g) when (@g > 0) {

    @responsive: extract(@responsivevars, @g);
    @responsiveabv: extract(@responsivevarsabv, @g);

    @media (max-width: @@responsive) {

        .h-loop(@h) when (@h > 0) {

            .i-loop(@i) when (@i > -1) {

                .j-loop(@j) when (@j > 0) {
                    @direction: extract(@directionlist, @j);
                    @directionname: extract(@directions, @j);
                    @type: extract(@spacingtype, @h);
                    @typeabv: extract(@sapcingtypeabv, @h);

                    .@{typeabv}-@{responsiveabv}-@{direction}-@{i} {
                        @{type}-@{directionname}: @i*1px !important; /* each time you use !important a kitty dies */
                    }

                    .j-loop(@j - 1);
                }

                .j-loop(length(@directions));
                .i-loop(@i - 5);
            }

            .i-loop(@max-pm-size);
            .h-loop(@h - 1);
        }

        .h-loop(length(@spacingtype));

    } // ~ end of @media

    .g-loop(@g - 1); // <- this was your key mistake
}

.g-loop(length(@responsivevars));

更少的遍历数组保持附加先前的值

1 个答案:

请改用`each`函数。

更少的遍历数组保持附加先前的值

1 个答案:

请改用each函数。

请改用`each`函数。