我有两个精灵:
我使用以下mixins生成Less文件:
正常精灵":
.sprite-icon_back() {
width: 25px;
height: 25px;
background: url('/Content/icons/mobile-icons-sprite.png') 0 0;
}
.sprite-icon_access() {
width: 48px;
height: 48px;
background: url('/Content/icons/mobile-icons-sprite.png') 0 -25px;
}
对于"高精灵":
.sprite-icon_back() {
width: 100px;
height: 100px;
background: url('/Content/icons/HighRes/mobile-icons-sprite-high.png') 0 0;
}
.sprite-icon_access() {
width: 50px;
height: 50px;
background: url('/Content/icons/HighRes/mobile-icons-sprite-high.png') -100px 0;
}
班级名称:
.m-icon-back {
.sprite-icon_back();
}
.m-icon-access{
.sprite-icon_access();
}
所以,当我检测到以下媒体查询时,我想使用高混合:
@media only screen and (-webkit-min-device-pixel-ratio : 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio : 2) {
}
如何根据该媒体查询更改background-image
(png文件)?我不知道这是否可能,但我愿意接受新的解决方案/替代方案。
答案 0 :(得分:5)
@media
内容由浏览器评估,因此您不能将其用作Less mixins的条件。因此,处理此问题的唯一方法是将规则集,mixin或感兴趣的属性放入感兴趣的@media
块中,例如对于这个用例,最简单的(但不是最理想的)解决方案是这样的:
.sprite-icon_back() {
// default properties:
width: 25px;
height: 25px;
background: url('/Content/icons/mobile-icons-sprite.png') 0 0;
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
// properties for the high resolution media:
width: 100px;
height: 100px;
background: url('/Content/icons/HighRes/mobile-icons-sprite-high.png') 0 0;
}
}
// usage:
.m-icon-back {
.sprite-icon_back();
}
使用以下CSS输出:
.m-icon-back {
width: 25px;
height: 25px;
background: url('/Content/icons/mobile-icons-sprite.png') 0 0;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
.m-icon-back {
width: 100px;
height: 100px;
background: url('/Content/icons/HighRes/mobile-icons-sprite-high.png') 0 0;
}
}
重复@media
代码(当您需要其他mixin的相同代码时)将进一步使用变量和/或mixins进行优化。例如:
.high-res-media(@styles) {
@media only screen and (min-device-pixel-ratio: 2) {
@styles();
}
}
.sprite-icon_back() {
width: 25px;
height: 25px;
background: url('/Content/icons/mobile-icons-sprite.png') 0 0;
.high-res-media({
width: 100px;
height: 100px;
background: url('/Content/icons/HighRes/mobile-icons-sprite-high.png') 0 0;
});
}
另请参阅评论中 @Harry 建议的 codepen 中的替代方法。
(我想有两种方法可以将两种方法结合起来,从而受益于两者,但这是另一本全新书的故事。)