Creating media specific alignments in SCSS

_text.scss

@mixin media-specific-styles($class) {
  %#{$class} { @content; }

  @each $size, $dim in $mq-sizes {
    @include breakpoint($size) {
      %#{$class}--#{$size} { @content; }
      .#{$class}--#{$size} { @extend %#{$class}--#{$size}; }
    }
  }
}

@include media-specific-styles('align--right') {
  text-align: right;
}

.test-class {
  @extend %align--right--md;
}