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.

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Top
%d bloggers like this: