less 循環

循環出圖片的背景色還有子類元素的

  			// 循環出圖片
            .generate-columns(19);

            .generate-columns(@n, @i: 1) when (@i =< @n) {
                &:nth-child(@{i}) {
                background-image:url("./../img/ecshop_case_detail/xcx-bg-@{i}.png"); 
                .logo_l .img {
                    background-image:url("./../img/ecshop_case_detail/xcx-logo-@{i}.png")
                }
                .qr-box .img {
                    background-image:url("./../img/ecshop_case_detail/xcx-qr-@{i}.png")
                }
            }
                .generate-columns(@n, (@i + 1));
            }

效果：

.aside--right .itembox li:nth-child(1) {
  background-image: url("../img/ecshop_case_detail/xcx-bg-1.png");
}
.aside--right .itembox li:nth-child(1) .logo_l .img {
  background-image: url("../img/ecshop_case_detail/xcx-logo-1.png");
}
.aside--right .itembox li:nth-child(1) .qr-box .img {
  background-image: url("../img/ecshop_case_detail/xcx-qr-1.png");
}
.aside--right .itembox li:nth-child(2) {
  background-image: url("../img/ecshop_case_detail/xcx-bg-2.png");
}
.aside--right .itembox li:nth-child(2) .logo_l .img {
  background-image: url("../img/ecshop_case_detail/xcx-logo-2.png");
}
.aside--right .itembox li:nth-child(2) .qr-box .img {
  background-image: url("../img/ecshop_case_detail/xcx-qr-2.png");
}
.aside--right .itembox li:nth-child(3) {
  background-image: url("../img/ecshop_case_detail/xcx-bg-3.png");
}
.aside--right .itembox li:nth-child(3) .logo_l .img {
  background-image: url("../img/ecshop_case_detail/xcx-logo-3.png");
}
.aside--right .itembox li:nth-child(3) .qr-box .img {
  background-image: url("../img/ecshop_case_detail/xcx-qr-3.png");
}