Where Do You Nest Your Sass Breakpoints?

I love nesting my @media query breakpoints. It’s perhaps the most important feature of Sass to me. Maybe I pick a method and do it like this:

.element {   display: grid;   grid-template-columns: 100px 1fr;   @include breakpoint(baby-bear) {     display: block;   } }

That’s straightforward enough. But what if my element has several sub-elements and the breakpoint affects them as well? There are different approaches, and I’m never quite sure which one I should be doing.

I could duplicate the breakpoint for each child:

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

The compiled CSS comes out to something like this:

@media screen and (min-width: 700px) {   .parent {   } } @media screen and (min-width: 700px) {   .parent .child {   } } @media screen and (min-width: 700px) {   .parent .child-2 {   } }

Or, I could duplicate the children under the first nested breakpoint:

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

That results in:

@media screen and (min-width: 700px) {   .parent .child {   }   .parent .child-2 {   } } .parent .child { } .parent .child-2 { }

Or I could do a combination of the two. Neither of them feels particularly great because of the duplication, but I’m not sure there is a perfect answer here. I err a little more on duplicating the media query, as it seems less error-prone than duplicating selectors.

The post Where Do You Nest Your Sass Breakpoints? appeared first on CSS-Tricks.




, ,