Question

我有两个精灵：

一个带有＃34;普通＆＃34;的图标分辨率;
一个带有＆＃34;高＆＃34;的图标分辨率;

我使用以下mixins生成Less文件：

正常精灵＆＃34;：

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

对于＆＃34;高精灵＆＃34;：

   .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文件）？我不知道这是否可能，但我愿意接受新的解决方案/替代方案。

Answer 1

@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 中的替代方法。

（我想有两种方法可以将两种方法结合起来，从而受益于两者，但这是另一本全新书的故事。）

基于媒体查询减少mixin

1 个答案:

-