gpt4 book ai didi

css - 媒体查询中的 LESS::css 规则不会在循环中附加值

转载 作者:太空宇宙 更新时间:2023-11-04 02:54:55 25 4
gpt4 key购买 nike

我想要一个 mixin 输入多个背景图片 url 以生成 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(link1@2x.jpg);
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
selector {
background-image: url(l1nk2@2x.jpg);
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
selector {
background-image: url(link3@2x.jpg);
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
selector {
background-image: url(l1nk4@2x.jpg);
}
}

1x 规则的输出符合预期,但对于涉及媒体查询的 2x 规则,它不会组合 url,而是为所有内容创建单独的媒体查询。

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

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

最佳答案

如果您想将规则集/属性保存在同一个媒体 block 中,您需要将生成它们的循环保存在同一个媒体 block 中,例如:

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);
}
}

关于css - 媒体查询中的 LESS::css 规则不会在循环中附加值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32305508/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com