css - 减少基于媒体查询的mixin

Question

我有两个 Sprite :

• 带有“正常”分辨率图标的图标；
• 带有“高分辨率”图标的图标；

我使用以下 mixin 生成了 Less 文件:

对于“普通 Sprite ”:

   .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 ”:

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

因此，当检测到以下媒体查询时，我想使用 high mixin:

@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) {
}

如何根据该媒体查询更改背景图像(png 文件)？我真的不知道这是否可能，但我愿意接受新的解决方案/替代方案。

Answer 1

@media 内容由浏览器评估，因此您不能将其用作 Less mixins 的条件。因此，处理此问题的唯一方法是将规则集、mixin 或只是感兴趣的属性放入感兴趣的 @media block 中，例如对于这个用例，最简单(但不一定是最优)的解决方案将是这样的:

.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代码(当您需要为其他mixins使用相同的代码时)需要使用变量和/或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;
    });
}

-

另请参阅此 codepen中的替代方法由@Harry在评论中建议。

(我认为有一些方法可以在一定程度上将这两种方法结合起来，以便从两者中受益，但这对于一本全新的书来说是另一个故事)。