更少::媒体查询中的CSS规则不会在循环中附加值

debugcn 发表于 Dev

Sagi_Avinash_Varma

我想要一个mixin输入多个背景图片网址，以生成1x和2x背景图片规则。

定义：：

.multiple-bg(...) {
    @len: length(@arguments);
    @i: 1;

    .generate(@list, @i) when (@i <= @len) {
        @src : extract(@list, @i);
        background-image+: ~'url("@{src}")';

        @filename  : ~`/(.*)\.(jpg|jpeg|png|gif)/.exec(@{src})[1]`;
        @extension : ~`/(.*)\.(jpg|jpeg|png|gif)/.exec(@{src})[2]`;

        @media only screen and (-webkit-min-device-pixel-ratio: 2) {
            background-image+: ~`"url(@{filename}@2x.@{extension})"`;
        }
        .generate(@list, @i + 1);
    }
    .generate(@arguments, @i);
}

用法：：

selector {
  .multiple-bg("link1.jpg", "l1nk2.jpg", "link3.jpg", "l1nk4.jpg");
}

输出：：

selector {
  background-image: url("link1.jpg"), url("l1nk2.jpg"), url("link3.jpg"), url("l1nk4.jpg");
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  selector {
    background-image: url([email protected]);
  }
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  selector {
    background-image: url([email protected]);
  }
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  selector {
    background-image: url([email protected]);
  }
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  selector {
    background-image: url([email protected]);
  }
}

1x规则的输出是预期的，但是涉及媒体查询的2x规则的输出却不合并URL，而是为所有内容创建单独的媒体查询。

我已经使用了较少语言功能中提到的“ +”运算符来执行此操作。http://lesscss.org/features/#merge-feature-space

任何人都可以提出解决方案，任何方法都可以。

七相最大

如果要将规则集/属性保留在同一媒体块中，则需要将生成规则集/属性的循环保留在同一媒体块中，例如：

selector {
    .multiple-bg("link1.jpg", "l1nk2.jpg", "link3.jpg", "l1nk4.jpg");
}

.multiple-bg(@list...) {
    .-();
    @media only screen 
        and (min-device-pixel-ratio: 2) {
            .-("@2x");
    }

    .-(@suffix: "", @i: length(@list)) when (@i > 0) {
        .-(@suffix, @i - 1);
        @src: replace(extract(@list, @i), "\.", "@{suffix}.");
        background-image+: url(@src);
    }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。