Select Page

Category: nesting

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....

Read More
www.000webhost.com