Question

我喜欢嵌套媒体查询，以便在特定选择器的级别上更加划分我的代码，这样我就不必在一个独立的媒体查询中使用媒体查询重新定义每个选择器，就像一个会在老式的CSS中做。例如，这是一个媒体查询示例mixin：

@mixin media-query {
    @media screen and (max-width: 1000px) {
        @content;
    }
}

这是SCSS的一些例子：

.class-1 {
    color: blue;
    @include media-query {
        color: red;
    }
    .class-2 {
        color: blue;
        @include media-query {
            color: red;
        }
        .class-3 {
            color: blue;
            @include media-query {
                color: red;
            }   
        }   
    }   
}

但是，我发现不嵌套这样的媒体查询，并且采用独立的方法，在编译为CSS时会产生较小的输出文件（并且只有一个媒体查询而不是很多）：

.class-1 {
    color: blue;
    .class-2 {
        color: blue;
        .class-3 {
            color: blue;
        }   
    }   
}
@include media-query {
    .class-1 {
        color: red;
    }
    .class-2 {
        color: red;
    }
    .class-3 {
        color: red;
    }
}

在选择器级别嵌套媒体查询是否是SCSS中的错误做法？是否最好创建独立查询？此外，独立输出是否更具性能，因为它只产生一个实际的媒体查询而不是许多？在此先感谢您的帮助，我已经阅读了sass文档，并没有在这个主题上找到任何特别有趣的内容。

嵌套媒体查询性能

0 个答案: