Type Factory

type-factory.scss

/*
 * a  mixin for easy generation of type styles with RTL and Breakpoint support
 * uses x-rem: https://gist.github.com/webgefrickel/4530526
 * uses Bootstrap media breakpoint mixin - could swap out for your own 
 * uses RTL mixin: https://gist.github.com/loopdream/ad7b77bd4b88c68afdc74bc0ec58f34b
 * Usage:
 
 h5 {

    @include type-factory(
        $breakpoints: (
            default: ( 
                font-family: $foco-bold,
                font-size: 18px,
                line-height: 26px,
                letter-spacing: 0,
                -webkit-font-smoothing: subpixel-antialiased,
                rtl: (
                    font-family: $ithra-arabic-bold
                )
            ),
            lg: (
                font-size: 22px,
                line-height: 30px
            )
        )
    );

}

 * Outputs:

    h5 {
      font-family: "foco-bold", Helvetica, Arial, sans-serif;
      font-size: 1.125rem;
      line-height: 1.625rem;
      letter-spacing: 0;
      -webkit-font-smoothing: subpixel-antialiased;
      margin-bottom: 1.25rem;
    }

    html[dir='rtl'] h5 {
      font-family: "ithra-arabic-bold", Helvetica, Arial, Sans-Serif;
    }

    @media (min-width: 1024px) {
      h5 {
        font-size: 1.375rem;
        line-height: 1.875rem;
      }
    }

 */


@mixin type-factory($breakpoints: null) {
    @if type-of($breakpoints)=='map' {
        @each $breakpoint, $styles in $breakpoints {
            @if $breakpoint == default {
                @each $property, $value in $styles {
                    @if $property == rtl and type-of($value) == 'map' {
                        @include rtl {
                            @include type-factory($breakpoints: (default: $value));
                        }
                    } @else if type-of($value)=='number' {
                        @include x-rem($property, $value);
                    } @else {
                        #{$property}: $value;
                    }
                }
            } @else {
                @include media-breakpoint-up($breakpoint) {
                    @include type-factory($breakpoints: (default: $styles));
                }
            }
        }
    } @else {
        @error 'type-factory: `#{$breakpoints}` must be a valid map';
    }
}