@mixin font-size($device: "") {
    %#{$device}smallest {
        font-size: 70%;
    }

    %#{$device}smaller {
        font-size: 80%;
    }

    %#{$device}small {
        font-size: 90%;
    }

    %#{$device}big {
        font-size: 110%;
    }

    %#{$device}bigger {
        font-size: 120%;
    }

    %#{$device}biggest {
        font-size: 130%;
    }

    @if $classes {
        .#{$device}smallest {
            @extend %#{$device}smallest;
        }

        .#{$device}smaller {
            @extend %#{$device}smaller;
        }

        .#{$device}small {
            @extend %#{$device}small;
        }

        .#{$device}big {
            @extend %#{$device}big;
        }

        .#{$device}bigger {
            @extend %#{$device}bigger;
        }

        .#{$device}biggest {
            @extend %#{$device}biggest;
        }
    }
}

@include font-size;

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

@include mobile {
    @include font-size("mobile-");
}