What is the correct way to write breakpoints in singularity gs?

Question

I doubt so i want to know if is better to do something like:

.class {

    @include breakpoint($desk) {

    }
}

or the opposite:

@include breakpoint($desk) {

.class {

    }
}

Im using the second one because i think in this way I group all the class or ID in a breakpoint, but I'm not sure.

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.