Discussion on: SCSS Nesting Question

This seems more like a bigger philosophical question on whether you want to be writing mobile-first (min-width) styles or desktop-first (max-width) styles. There probably is no right or wrong answer to that, other than that people sometimes treat mobile/small screen as an afterthought and forcing yourself to think about that styling first can be beneficial.

Sass is maybe just an implementation detail regarding that.

What I thought of when I saw the Sass nature of this post was HOW/WHERE you nest those media queries. I sometimes struggle with when to split it up and when the combine. Like...

.parent {

    @include breakpoint(desktop) {
    }

    .child {
        @include breakpoint(desktop) {
        }
    }

   .child-2 {
        @include breakpoint(desktop) {
        }
    }

}

Versus

.parent {

    @include breakpoint(desktop) {

       .child {
       }

       .child-2 {
       } 

    }

    .child {
    }

   .child-2 {
    }

}