Responsive Mixins

mixins-responsive.scss

@mixin media-xs {
  @media screen and (min-width: $screen-xs-min) and (max-width: $screen-xs-max) {
    @content;
  }
}

@mixin media-sm {
  @media screen and (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
    @content;
  }
}

@mixin media-md {
  @media screen and (min-width: $screen-md-min) and (max-width: $screen-md-max) {
    @content;
  }
}

@mixin media-lg {
  @media screen and (min-width: $screen-lg-min) {
    @content;
  }
}

@mixin media-sm-min {
  @media screen and (min-width: $screen-sm-min) {
    @content;
  }
}

@mixin media-md-min {
  @media screen and (min-width: $screen-md-min) {
    @content;
  }
}

@mixin media-lg-min {
  @media screen and (min-width: $screen-lg-min) {
    @content;
  }
}

@mixin media-xs-max {
  @media screen and (max-width: $screen-xs-max) {
    @content;
  }
}

@mixin media-sm-max {
  @media screen and (max-width: $screen-sm-max) {
    @content;
  }
}

@mixin media-md-max {
  @media screen and (max-width: $screen-md-max) {
    @content;
  }
}





@mixin xsml($rule, $x, $s, $m, $l) {
  #{$rule}: $x;

  @include media-sm-min {
    #{$rule}: $s;
  }

  @include media-md-min {
    #{$rule}: $m;
  }

  @include media-lg-min {
    #{$rule}: $l;
  }
}

@mixin xsm($rule, $x, $s, $m) {
  @include xsml($rule, $x, $s, $m, $m);
}

@mixin sml($rule, $s, $m, $l) {
  @include xsml($rule, $s, $s, $m, $l);
}

@mixin sm($rule, $s, $m) {
  @include xsml($rule, $s, $s, $m, $m);
}