<h1>Where Do You Nest Your Sass Breakpoints</h1>
<div class="parent">
  <div class="child"></div>
  <div class="child-2"></div>
</div>
// 'rough' version of the example from the article
.parent {
  @media (min-width: 700px) {
    .child {
      background-color: red;
    }
    .child-2 {
      background-color: orange;
    }
  }
  .child {
    background-color: purple;
  }
  .child-2 {
    background-color: purple;
  }
}

// stuff

.parent > div {
  height: 40vh;
  width: 100vw;
}

h1 {
  text-align: center;
  margin: 0;
  height: 20vh;
}
View Compiled
// https://css-tricks.com/where-do-you-nest-your-sass-breakpoints/
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.