data8/_sass/page/inuitcss/tools/_tools.font-size.scss

///* ========================================================================
//   #FONT-SIZE
//   ======================================================================== */

// Generates a rem font-size (with pixel fallback) and a baseline-compatible
// unitless line-height from a pixel font-size value. Basic usage is simply:
//
//   @include inuit-font-size(18px);
//
// You can force a specific line-height by passing it as the second argument:
//
//   @include inuit-font-size(16px, 1);
//
// You can also modify the line-height by increments, while staying in the
// baseline grid, by setting the `$modifier` parameter. It takes a positive
// or negative integer, and it will add or remove "lines" to the  generated
// line-height. This is the recomended way to do it, unless you really need
// an absolute value. i.e.:
//
//   // add 2 lines:
//   @include inuit-font-size(24px, $modifier: +2);
//
//   // subtract 1 line:
//   @include inuit-font-size(24px, $modifier: -1);

@mixin inuit-font-size($font-size, $line-height: auto, $modifier: 0, $important: false) {

  @if (type-of($font-size) == number) {
    @if (unit($font-size) != "px") {
      @error "`#{$font-size}` needs to be a pixel value.";
    }
  } @else {
    @error "`#{$font-size}` needs to be a number.";
  }

  @if ($important == true) {
    $important: !important;
  } @else if ($important == false) {
    $important: null;
  } @else {
    @error "`#{$important}` needs to be `true` or `false`.";
  }

  // We provide a `px` fallback for old IEs not supporting `rem` values.
  font-size: $font-size $important;
  font-size: ($font-size / $inuit-global-font-size) * 1rem $important;

  @if ($line-height == "auto") {

    // Define how many grid lines each text line should span.
    // By default, we set it to the minimum number of lines necessary
    // in order to contain the defined font-size, +1 for some breathing room.
    // This can be modified with the `$modifier` parameter.
    $lines: ceil($font-size / $inuit-global-baseline) + $modifier + 1;
    $line-height: $lines * $inuit-global-baseline;

    line-height: ($line-height / $font-size) $important;
  }

  @else {

    @if (type-of($line-height) == number or $line-height == "inherit" or $line-height == "normal") {
      line-height: $line-height $important;
    }

    @else if ($line-height != 'none' and $line-height != false) {
      @error "D’oh! `#{$line-height}` is not a valid value for `$line-height`."
    }

  }

}