css - 无冗余的 LESS CSS 视网膜媒体查询

Question

我正在使用基于组件的 CSS 样式，所以我一直在使用 mixin 来允许我使用媒体查询而不会意外地编译数百个。这就是我为屏幕尺寸所做的:

主文件:

.mq-medium() {}

@import //other files

@media only screen and (min-width: 600px) {
  .mq-medium;
}

另一个文件:

.mq-medium() {
  .banner {
    width: 50%;
  }
}

这可以多次使用并产生分组查询。

问题

我正在尝试对视网膜背景图像查询做同样的事情，但我不知道如何去做。这是我的测试:

.mq-retina() { }

.background-image(@image){
  @filename:  ~`/(.*)\.(jpg|jpeg|png|gif)/.exec(@{image})[1]`;
  @extension: ~`/(.*)\.(jpg|jpeg|png|gif)/.exec(@{image})[2]`;
  background-image: ~`"url(@{filename}.@{extension})"`;
  .mq-retina() {
    & {
      background-image: ~`"url(@{filename}_2x.@{extension})"`;
      background-size: 100%;
    }
  }
}

.lol {
  .background-image("test.jpg");
}

@media only screen and (min-device-pixel-ratio: 1.5) { //shortened for this example
  .mq-retina;
}

但是输出只是

.lol {
  background-image: url(test.jpg);
}

我认为这与范围界定问题有关，但我不确定如何解决这个问题。如何添加到 .mq-retina() mixin 而不会出现范围界定问题？

Answer 1

(有关此解决方案的上下文，请参阅上面的评论)。我会说非重复媒体查询的代价将永远是“然后重复其他事情”。 IE。它要么必须是媒体相关的属性，如:

// ...................................
// usage:

.mq-default() {
    .banner {
        .background-image("test.jpg");
    }
}

.mq-retina() {
    .banner {
        .background-image("test.jpg");
    }
}

// ...................................
// impl:

.mq-default() {}
.mq-retina()  {}

& {
    .mq-default;

    .background-image(@image) {
        background-image: @image;
    }
}

@media (min-device-pixel-ratio: 1.5) {
    .mq-retina;

    .background-image(@image) {
        background-image: replace(@image, "\.", "_2x.");
        background-size: 100%;
    }
}

或者媒体依赖于选择器本身，如:

// ...................................
// usage:

.background-image(banner, "test.jpg");

// ...................................
// impl:

.mq-retina() {}

@media (min-device-pixel-ratio: 1.5) {
    .mq-retina;
}

.background-image(@class, @image) {
    .@{class} {
        background-image: @image;
    }

    .mq-retina() {
        .@{class} {
            background-image: replace(@image, "\.", "_2x.");
            background-size: 100%;
        }
    }
}

---

附言对于这个简化的案例，也可以修改第一个示例以消除重复，例如:

// ...................................
// usage:

.mq-common() {
    .banner {
        .background-image("test.jpg");
    }
}

// ...................................
// impl:

.mq-default() {.mq-common}
.mq-retina()  {.mq-common}

& {
    .mq-default;

    .background-image(@image) {
        background-image: @image;
    }
}

@media (min-device-pixel-ratio: 1.5) {
    .mq-retina;

    .background-image(@image) {
        background-image: replace(@image, "\.", "_2x.");
        background-size: 100%;
    }
}

但这样它实际上变成了第二个示例的变体(其中更复杂的代码将导致在生成的 CSS 中重复选择器，因为您不想将所有属性都放入 .mq-common), 不算整个事情也变得相当令人头疼。

---

附言最后， 最终可以通过引入另一个间接级别来合并“所有内容”(在生成的 CSS 中)，但源代码本身变得过于冗长，无法在实践中实际使用。 (在这个例子中，我将把它分成两个文件以获得更清晰的代码，但这并不是真正需要的 - 导入的文件可以写成一个大的 mixin):

// ...................................
// styles.less:

.banner {
    .mq-default({
        color: red;
    });

    .mq-medium({
        color: green;
    });

    .mq-retina({
        color: blue;
    });

    .background-image("test.jpg");
    note: not "wrapped" properties will appear in every media block;
}

.background-image(@image) {
    .mq-default({
        background-image: @image;
    });

    .mq-retina({
        background-image: replace(@image, "\.", "_2x.");
        background-size: 100%;
    });
}

---

// ...................................
// main.less:

.media-import(default);

@media (min-width: 600px) {
    .media-import(medium);
}

@media (min-device-pixel-ratio: 1.5) {
    .media-import(retina);
}

.media-import(@device) {
    .mq-default(@styles) when (@device = default) {@styles();}
    .mq-medium(@styles)  when (@device = medium)  {@styles();}
    .mq-retina(@styles)  when (@device = retina)  {@styles();}
    @import (multiple) "styles.less";
}