Tag: Nest

Can you nest @media and @support queries?

Yes, you can, and it doesn’t really matter in what order. A CSS preprocessor is not required. It works in regular CSS.

This works:

@supports(--a: b) {   @media (min-width: 1px) {     body {       background: red;     }   } }

And so does this, the reverse nesting of the above:

@media (min-width: 1px) {   @supports(--a: b) {     body {       background: green;     }   } }

You can keep going with the nesting, if it ever makes sense:

@media (min-width: 2px) {   @media (min-width: 1px) {     @supports (--a: b) {       @supports (display: flex) {         body {           background: pink;         }       }     }   } }

There is probably a point where the logic of that gets out of hand, so careful. But hey, it works. Presumably, you can “infinitely” nest at-rules.

To look at nested code like that looks a little like a CSS preprocessor is in use, but that’s not the case here. Regular ol’ CSS handles this just fine, and in fact, CSS preprocessors don’t meaningfully manipulate it at all (tested Sass, Less, and Stylus).

The post Can you nest @media and @support queries? appeared first on CSS-Tricks.


, , ,

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.


, ,