plain-ui/src/scss/helpers/_typography.scss

/**
 *  typography
 *
 *
 */

@mixin media-add-typography($class) {
    .#{$class} {
        @content;
    }

    @include media-xs() {
        .#{$class}-xs {
            @content;
        }
    }

    @include media-sm() {
        .#{$class}-sm {
            @content;
         }
     }

     @include media-md() {
        .#{$class}-md {
            @content;
        }
     }

     @include media-lg() {
        .#{$class}-lg {
            @content;
        }
     }

     @include media-xlg() {
        .#{$class}-xlg {
            @content;
        }
     }
 }

@include media-add-typography('left') {
    text-align: left;
}

@include media-add-typography('right') {
    text-align: right;
}

@include media-add-typography('center') {
    text-align: center;
}

@include media-add-typography('justify') {
    text-align: justify;
}

@include media-add-typography('uppercase') {
    text-transform: uppercase;
}

@include media-add-typography('lowercase') {
    text-transform: lowercase;
}

@include media-add-typography('crossed') {
    text-decoration: line-through;
}

@include media-add-typography('underline') {
    text-decoration: underline;
}

@include media-add-typography('capitalize') {
    text-transform: capitalize;
}

@include media-add-typography('italic') {
    font-style: italic;
}

@include media-add-typography('light') {
    font-weight: lighter;
}

@include media-add-typography('normal') {
    font-weight: normal;
}

@include media-add-typography('medium') {
    font-weight: medium;
}

@include media-add-typography('bold') {
    font-weight: bolder;
}

/**
 *  font-sizes
 *
 *
 */

@mixin add-font-size($name, $font-size) {
    .size-#{$name} {
        font-size: #{$font-size};
    }
}

@each $name, $font-size in $font-sizes {
    @include add-font-size($name, $font-size);

    @include media-xs() {
        @include add-font-size('xs-' + $name, $font-size);
    }

    @include media-sm() {
        @include add-font-size('sm-' + $name, $font-size);
    }

    @include media-md() {
        @include add-font-size('md-' + $name, $font-size);
    }

    @include media-lg() {
        @include add-font-size('lg-' + $name, $font-size);
    }

    @include media-xlg() {
        @include add-font-size('xlg-' + $name, $font-size);
    }
}

/**
 *  white-space
 *
 *
 */

@include media-add-typography('white-space-normal') {
    white-space: normal;
}

@include media-add-typography('white-space-nowrap') {
    white-space: nowrap;
}

@include media-add-typography('white-space-pre') {
    white-space: pre;
}

@include media-add-typography('white-space-preline') {
    white-space: preline;
}

@include media-add-typography('white-space-preline') {
    white-space: pre-line;
}

@include media-add-typography('white-space-prewrap') {
    white-space: pre-wrap;
}