SASS. Миксин медиазапросов, избыточный код

[anvyd]

Решил освоить SASS, очень мне нравится его идея, большое коммьюнити, все нравится, но столкнулся с проблемой, собственно ниже и опишу.
Хочу сделать миксин медиазапросов
есть 4 переменные, в них описаны размеры экрана, и создан несложный миксин.

$screen_xs: 320px;$screen_s:  768px;$screen_m:  1024px;$screen_l:  1200px;$screen_xl: 1376px;@mixin mediaquery($media) { @if $media == screen_s {  @media only screen and (max-width: $screen_s + 1) { @content; } } @else if $media == screen_m {  @media only screen and (min-width: $screen_m + 1){ @content; } } @else if $media == screen_l {  @media only screen and (min-width: $screen_l + 1) { @content; } } @else if $media == screen_xl {  @media only screen and (min-width: $screen_xl + 1) { @content; } }}

дальше я этот миксин подключаю, например, к боди, пример абстрактный.
 

body{ background: $blue_grey; @include mediaquery(screen_s)  { background: $lime;} @include mediaquery(screen_m)  { background: $teal;} @include mediaquery(screen_l)  { background: $orange;} @include mediaquery(screen_xl) { background: $pink;} color: $color_base; font-family: $font_base; @include flexbox; @include flex-direction(column); min-height: 100vh;}

суть такая, что фон меняется в зависимости от разрешения. НА выходе мы имеем 
 

// outputbody {  background: #607D8B;  color: #cccccc;  font-family: "Proxima Nova", Tahoma, helvetica, sans-serif;  display: -webkit-box;  display: -moz-box;  display: -ms-flexbox;  display: -webkit-flex;  display: flex;  -webkit-flex-direction: vertical;  -moz-flex-direction: vertical;  -ms-flex-direction: column;  -webkit-flex-direction: column;  flex-direction: column;  min-height: 100vh;}@media only screen and (max-width: 769px) {  body {background: #CDDC39;}}@media only screen and (min-width: 1025px) {  body {background: #009688;}}@media only screen and (min-width: 1201px) {  body {background: #FF9800;}}@media only screen and (min-width: 1377px) {  body {background: #E91E63;}}

Казалось бы этого я и ждал, так и есть, результат достигнут, но теперь у меня есть другой элемент, который я хочу видоизменять в зависимости от экрана, и пишу следующее
 

.size:after{ content: "Size XS"; @include mediaquery(screen_s)  { content: "Size S";} @include mediaquery(screen_m)  { content: "Size M";} @include mediaquery(screen_l)  { content: "Size L";} @include mediaquery(screen_xl) { content: "Size XL";}}

Код несложный, есть блок, я в псевдоэлементе :after меняю слова в зависимости от разрешения.
Собственно тут я и сталкиваюсь с проблемой избыточности, у меня дублируется код. На выходе я получаю ОТДЕЛЬНЫЕ медиазапросы 

// output.size:after {content: "Size XS";}@media only screen and (max-width: 769px) { .size:after {content: "Size S";}}@media only screen and (min-width: 1025px) { .size:after {content: "Size M";}}@media only screen and (min-width: 1201px) { .size:after {content: "Size L";}}@media only screen and (min-width: 1377px) { .size:after {content: "Size XL";}}

так как же мне избавиться от этой избыточности? делать как и раньше в отдельном месте прописывать разрешение и в него вставлять все элементы, стили которых необходимо менять? но тогда пропадает прелесть использования SASS

[Sensei]

Можно скомбинировать.

Вот, например, модуль для «ноды» https://www.npmjs.com/package/group-css-media-queries

 

Или для систем сборки

https://www.npmjs.com/package/gulp-combine-media-queries

https://www.npmjs.com/package/grunt-combine-media-queries