Generated by SassMeister.com.

font-size-mixin.scss

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----

// screen breakpoints can be sourced from the framework you are using
// in my case it is bootstrap
$screen-xs-max: 670px;
$screen-sm-max: 980px;
$screen-md-max: 1200px;

$mobile-max: $screen-xs-max;
$tablet-max: $screen-sm-max;
$laptop-max: $screen-md-max;

@function unit($val, $unit) {
  @return $val * 1#{$unit};
}

@mixin mobile {
  @media screen and (max-width: $mobile-max) {
    @content;
  }
}
  
@mixin tablet {
  @media screen and (min-width: $mobile-max + 1) and (max-width: $tablet-max) {
    @content;
  }
}

@mixin laptop {
  @media screen and (min-width: $tablet-max + 1) and (max-width: $laptop-max) {
    @content;
  }
}

@mixin computer {
  @media screen and (min-width: $laptop-max + 1) {
    @content;
  }
}

// Usage documentation
// For setting font size
// fs-(device)-(option)
// let's say you want to set font size to lg for computer and small for mobile
// For setting line height
// .fs-C-lg and .fs-M-sm
// lh-(device)-(option)
// to specify line height of 1.6 for computer and 1 for tablet
// .lh-C-1_6 and .lh-T-md
// Where size is one of:
$size-options: xs 0.5, sm 0.75, md 1, lg 1.25, 1_2 1.2, 1_4 1.4, 1_6 1.6, 1_8 1.8, 2 2, 2_2 2.2, 2_4 2.4, 2_6 2.6, 2_8 2.8, 3 3, 3_2 3.2, 3_4 3.4, 3_6 3.6, 3_8 3.8, 4 4;

@mixin make-font-size-mixin($breakpoint: all, $i: length($size-options)) {
  $infix: '';
  @if $breakpoint != "all" {
    $infix: '-#{$breakpoint}';
  }
  
  @while $i > 0 {
    $size-option: nth($size-options, $i);
    @if index((xs,sm,md,lg,1_2,1_4,1_6,1_8,2),nth($size-option,1)) {
      .lh#{$infix}-#{nth($size-option,1)} { line-height: nth($size-option,2) !important; }
    }
    .fs#{$infix}-#{nth($size-option,1)} { font-size: unit(nth($size-option,2),em) !important; }

    // reduce counter
    $i: $i - 1;
  }
}


//
// Use the mixin for each breakpoint
//

@include make-font-size-mixin();
@include mobile { 
  @include make-font-size-mixin(M);
}
@include tablet { 
  @include make-font-size-mixin(T);
}
@include laptop { 
  @include make-font-size-mixin(L);
}
@include computer { 
  @include make-font-size-mixin(C);
}