Snippets

Michael Gale Fluid Type Mixin

Created by Michael Gale

// Strip the number of its pixel value (eg. '10px' becomes '10')
@function strip-unit($value) {
  @return $value / ($value * 0 + 1);
}

// eg. @include fluid-type(font-size, 320px, 1366px, 18px, 26px);

@mixin fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value) {
  @each $property in $properties {
    #{$property}: $min-value;
  }

  @media screen and (min-width: $min-vw) {
    @each $property in $properties {
      #{$property}: calc(#{$min-value} + #{strip-unit($max-value - $min-value)} * (100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)});
    }
  }

  @media screen and (min-width: $max-vw) {
    @each $property in $properties {
      #{$property}: $max-value;
    }
  }
}

Comments (0)

HTTPS SSH

You can clone a snippet to your computer for local editing. Learn more.