Меньшее количество циклов в массиве продолжает добавлять предыдущее значение

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 )

Less

@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. *) - нет причин беспокоиться о рекурсивных миксинах для тривиальных циклов. Рекурсивные смешанные циклы остаются полезными только для генерации «рекурсивных значений», т. Е. Когда каждая новая итерация должна повторно использовать значение, сгенерированное пред. итерация - это то, что 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));