media-queries.scss

// ------------------------
// Organization n°1: put all the media queries at the end of the stylesheet
// ------------------------

.rule1 {
  width: 100%;
  
  h1 {
    color: red;
  }
}

// ... a lot of code

@include breakpoint($desktop) {
  .rule1 {
    width: 50%;
    
    h1 {
      color: green;
    }
  }
}


// ------------------------
// Organization n°2: put all the media queries per "major" block
// ------------------------

.rule1 {
  width: 100%;
  
  h1 {
    color: red;
  }
  
  @include breakpoint($desktop) {
    width: 50%;
    
    h1 {
      color: green;
    }
  }
}

// ------------------------
// Organization n°3: put all the media queries per rule
// ------------------------

.rule1 {
  width: 100%;
  
  @include breakpoint($desktop) {
    width: 50%;
  }
  
  h1 {
    color: red;
    
    @include breakpoint($desktop) {
      color: green;
    }
  }
}