mediaquery sass mixin and giving a nice output

Question

With Sass I fount 2 ways to get media queries in your stylesheet

option 1:

at the end of you page like this

@include min-screen(320px) {
  ...
}
@include min-screen(480px) {
  ...
}
@include min-screen(768px) {
  ...
}
@include min-screen(1024px) {
  ...
}

option 2: underneath your already made styles in the middle of you stylesheet

.grid-1-4 {
  width: 100%;
  @include breakpoint(phablet) {
    width: 50%;
  }
  @include breakpoint(laptop) {
    width: 25%;
  }
}
.grid-1-3 {
  width: 100%;
  @include breakpoint(phablet) {
    width: 33.3%;
    min-height: 290px;
  }
}
.grid-1-2 {
  width: 100%;
  @include breakpoint(tablet) {
    width: 50%;
  }
}

Option 1 gives nice output like you would normally write it yourself, but option 2 is nicer to work with.

Is there a way to make option 2 give the same output as option 1?

like the following

@media all and (min-width: 1001px) {
  .firstclass {
    /*stuff*/
  }
  .nextclass {
    /*stuff*/
  }
  .moreclasses {
    /*stuff*/
  }
}