Skip to content
Get help on SlackWatch Sanity demo

Understanding the CSS Nesting Module in Gatsby Portfolio Template

2 replies
Last updated: Aug 9, 2020
hey all, I am working with the gatsby portfolio template that has 
postcss
in it, I’ve noticed a `@nest`that i couldn’t find much knowledge about online, does anyone know how to explain it to a noob like me? Here is an example

.nav {
  display: none;

  @nest & ul {
    margin: 0;
    padding: 0;
    border: solid yellow 3px;
    display: flex;
    flex-direction: column;
  }
}

Aug 9, 2020, 11:04 AM
never mind. I found the specification here https://drafts.csswg.org/css-nesting-1/
Aug 9, 2020, 11:30 AM
Hey Omar, have a look at this draft spec of the CSS Nesting Module: https://drafts.csswg.org/css-nesting-1/#at-nest
It’s similar to direct nesting (you may have seen selectors like 
&.bar
before), but more visually discerning and less limited.
Edit: beat me to it!
😄
Aug 9, 2020, 11:31 AM

Sanity– build remarkable experiences at scale

The Sanity Composable Content Cloud is the headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get startedWatch demo

Was this answer helpful?