mediaqueries.scss

$x48: 48em;
$x64: 64em;
$x75: 75em;

@mixin media($medias){
  @each $media in $medias {
    @if $media == xs {
      @media only screen and (max-width: $x48) { @content; }
    }
    @else if $media == sm {
      @media only screen and (min-width: $x48) and (max-width: $x64) { @content; }
    }
    @else if $media == md {
      @media only screen and (min-width: $x64) and (max-width: $x75) { @content; }
    }
    @else if $media == lg{
      @media only screen and (min-width: $x75) { @content; }
    }
  }
}

.example {
  color: black;
  @include media(xs) {color: blue;}
  @include media(sm md) { color: violet}
}

$x48: 575px;
$x64: 768px;
$x75: 992px;
$x76: 1200px;

@mixin media($medias){
@each $media in $medias {
@if $media == xs {
@media only screen and (max-width: $x48) { @content; }
}
@else if $media == sm {
@media only screen and (min-width: $x48) and (max-width: $x64) { @content; }
}
@else if $media == md {
@media only screen and (min-width: $x64) and (max-width: $x75) { @content; }
}
@else if $media == lg {
@media only screen and (min-width: $x75) and (max-width: $x76) { @content; }
}
@else if $media == xl{
@media only screen and (min-width: $x75) { @content; }
}
}
}

.cst-wrapper {
@include media(xs sm) {
padding: 1em 0.5rem;
}
@include media(md lg xl) {
padding: 1em 4em;
}
}