Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.3.2)
// ----

@function breakpoint-value ($value) {

    // passthrough a number value
    @if type-of($value) == number {
        @return $value;
    }

    @else if type-of($value) == string {
        @if map-has-key($mq-size-values, $value) {
            @return map-get($mq-size-values, $value);
        }
    }

    // Not a number and not found in the map
    @return null;
}

@mixin breakpoint ($size, $type: min) {
    $_break_start: null;
    $_break_stop: null;

    // Provided a range
    @if type-of($size) == list and length($size) {
        $_break_start: breakpoint-value(nth($size, 1));

        @if (length($size) > 1) {

            // Default type is `inside`
            $outside-options: ("outside", "exclude", "not between", "not-between");
            @if (false == index($outside-options, $type)) {
                $type: inside;
            }

            $_break_stop: breakpoint-value(nth($size, 2));
        }
    }
    // Single value
    @else {
        $_break_start: breakpoint-value($size);
    }

    @if ($_break_start) {

        $_query: '';

        // Between two number
        @if ($type == inside and $_break_stop) {
            $_query: "(min-width: " + $_break_start + ") and (max-width: " + $_break_stop + ")";
        }
        // Not between two numbers
        @else if ($type == outside and $_break_stop) {
            $_query: "(max-width: " + $_break_start + ")";
            $_query: $_query + ", screen and ";
            $_query: $_query + "(min-width: " + $_break_stop + ")";
        }
        // Below and stop at a number
        @else if ($type == max) {
            $_query: "(max-width: " + $_break_start + ")";
        }
        // Start at a number
        @else {
            $_query: "(min-width: " + $_break_start + ")";
        }

        @media screen and #{$_query} {
            @content;
        }
    }
}


$mq-overlap: 0.065em;

$mq-size-values: (
    xs: 30em,
    sm: 35.5em,
    md: 48em,
    lg: 60em,
    xl: 75em,
    xs-max: 35.5em - $mq-overlap,
    sm-max: 48em - $mq-overlap,
    md-max: 60em - $mq-overlap,
    lg-max: 75em - $mq-overlap
);

$mq-sizes: (
    xs: "min-width: " + map-get($mq-size-values, "xs"),
    sm: "min-width: " + map-get($mq-size-values, "sm"),
    md: "min-width: " + map-get($mq-size-values, "md"),
    lg: "min-width: " + map-get($mq-size-values, "lg"),
    xl: "min-width: " + map-get($mq-size-values, "xl")
);

%align--left {
    text-align: left;
}

%align--center {
    text-align: center;
}

%align--right {
    text-align: right;
}

$helpers-silent: (
    align--right: %align--right,
    align--left: %align-left,
    align--center: %align-center
  );

$helpers: (
    align--right: (
      text-align: right),
    align--left: (
      text-align: left),
    align--center: (
      text-align: center)
  );
  



@mixin media-helpers($helpers) {

  @each $size, $dim in $mq-sizes {
    @include breakpoint($size) {
      @each $selector, $declarations in $helpers {

        %#{$selector}--#{$size} {  
          @each $prop, $val in $declarations {
            #{$prop}: $val;
          }
        }
        
        .#{$selector}--#{$size} { @extend %#{$selector}--#{$size} }
        
      }
    }
  }
}

@include media-helpers($helpers);


.foo {
  @extend %align--right--xs;
}

SassMeister-output.css

@media screen and (min-width: 30em) {
  .align--right--xs, .foo {
    text-align: right;
  }
  .align--left--xs {
    text-align: left;
  }
  .align--center--xs {
    text-align: center;
  }
}

@media screen and (min-width: 35.5em) {
  .align--right--sm {
    text-align: right;
  }
  .align--left--sm {
    text-align: left;
  }
  .align--center--sm {
    text-align: center;
  }
}

@media screen and (min-width: 48em) {
  .align--right--md {
    text-align: right;
  }
  .align--left--md {
    text-align: left;
  }
  .align--center--md {
    text-align: center;
  }
}

@media screen and (min-width: 60em) {
  .align--right--lg {
    text-align: right;
  }
  .align--left--lg {
    text-align: left;
  }
  .align--center--lg {
    text-align: center;
  }
}

@media screen and (min-width: 75em) {
  .align--right--xl {
    text-align: right;
  }
  .align--left--xl {
    text-align: left;
  }
  .align--center--xl {
    text-align: center;
  }
}