@mixin text-align($device: "") {
    %#{$device}text-#{$class-left} {
        text-align: left;
    }

    %#{$device}text-#{$class-right} {
        text-align: right;
    }

    %#{$device}text-#{$class-center} {
        text-align: center;
    }

    %#{$device}text-justify {
        text-align: justify;
    }

    @if $classes {
        .#{$device}text-#{$class-left} {
            @extend %#{$device}text-#{$class-left};
        }

        .#{$device}text-#{$class-right} {
            @extend %#{$device}text-#{$class-right};
        }

        .#{$device}text-#{$class-center} {
            @extend %#{$device}text-#{$class-center};
        }

        .#{$device}text-justify {
            @extend %#{$device}text-justify;
        }
    }
}

@include text-align;

@each $device, $pixels in $devices {
    @include media($device) {
        @include text-align($device + "-");
    }
}

@include mobile {
    @include text-align("mobile-");
}