grid - 在奇点 gs 中编写断点的正确方法是什么？

Question

我怀疑所以我想知道这样做是否更好：

.class {

    @include breakpoint($desk) {

    }
}

或相反：

@include breakpoint($desk) {

.class {

    }
}

我使用第二个，因为我认为通过这种方式我将所有类或 ID 分组在一个断点中，但我不确定。

Answer 1

In Sass, media queries bubble up to the top of nesting, so both examples produce identical CSS.

The second approach lets you group multiple declarations under one media query, but you should only use it when those declarations would appear next to each other anyway. There's an opinion that you should not structure your code so that it produces less media queries. Instead, you should structure your code by function, i. e. by what page elements the code describes. Media queries should be applied as narrowly as possible. Server's gzip compression will deal with duplicate code.

But this is a matter of personal preference and both examples are valid and acceptable.