我正在使用基于组件的 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 而不会出现范围界定问题?
最佳答案
(有关此解决方案的上下文,请参阅上面的评论)。 我会说非重复媒体查询的代价将永远是“然后重复其他事情”。 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";
}
关于css - 无冗余的 LESS CSS 视网膜媒体查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26000660/