Как объединить медиа-запросы SASS?

Есть 4 медиа-запроса для ширины экранов. Допустим я хочу применить к определенному размеру экрана определенное свойство SASS к определенному селектору. Как сделать так, чтобы в конечном CSS оставалось 4 медиа-запроса, а не "спагетти" из медиа-запросов?

SASS файл:

@mixin xs-width($num){
    @media screen and ( min-width: 320px) {
        width: calc(100%*($num/12));
    }
}
@mixin sm-width($num){
    @media screen and ( min-width: 480px) {
        width: calc(100%*($num/12));
    }
}
@mixin md-width($num){
    @media screen and ( min-width: 768px) {
        width: calc(100%*($num/12));
    }
}
@mixin lg-width($num){
    @media screen and ( min-width: 1024px) {
        width: calc(100%*($num/12));
    }
}
.test {
    @include xs-width (12);
    @include sm-width (6);
    @include md-width (4);
    @include lg-width (3);
}
.test-2 {
    @include xs-width (12);
    @include sm-width (6);
    @include md-width (4);
    @include lg-width (3);
}

Конечный CSS:

@media screen and (min-width: 320px) {
  .test {
    width: calc(100%*($num/12));
  }
}
@media screen and (min-width: 480px) {
  .test {
    width: calc(100%*($num/12));
  }
}
@media screen and (min-width: 768px) {
  .test {
    width: calc(100%*($num/12));
  }
}
@media screen and (min-width: 1024px) {
  .test {
    width: calc(100%*($num/12));
  }
}
@media screen and (min-width: 320px) {
  .test-2 {
    width: calc(100%*($num/12));
  }
}
@media screen and (min-width: 480px) {
  .test-2 {
    width: calc(100%*($num/12));
  }
}
@media screen and (min-width: 768px) {
  .test-2 {
    width: calc(100%*($num/12));
  }
}
@media screen and (min-width: 1024px) {
  .test-2 {
    width: calc(100%*($num/12));
  }
}

А надо вот так (под каждый экран):

@media screen and (min-width: 320px) {
      .test {
        width: calc(100%*($num/12));
      }
      .test-2 {
        width: calc(100%*($num/12));
      }
}