基于媒体查询减少mixin

Question

我有两个精灵:

• 一个带有"正常"分辨率的图标;
• 一个带有"高"分辨率的图标;

我使用以下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文件)？我真的不知道这是否可能,但我愿意接受新的解决方案/替代方案.

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相同的代码时)将进一步使用变量和/或mixin进行优化.例如这样:

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

(我想有两种方法可以将这两种方法结合起来,从而从两者中受益,但这是另一个全新书的故事).