DevTeam-Admin
3/26/2020 - 11:06 PM

Fluid Typography

This is a Sass mixin that creates fluid typography - you set the type/property size at 320px mobile, and also at the largest container size, and your type will be proportionally sized for all sizes inbetween

somefile
content_copyfile_download
.my-element-title {
  @include fluid-type(font-size, 320px, 1366px, 14px, 18px);
}
mixins
content_copyfile_download
/*=================================================
Fluid Typography
=================================================== */
// ----
// libsass (v3.5.0.beta.2)
// ----

// =========================================================================
//
//  PRECISE CONTROL OVER RESPONSIVE TYPOGRAPHY FOR SASS
//  ---------------------------------------------------
//  Indrek Paas @indrekpaas
//
//  Inspired by Mike Riethmuller's Precise control over responsive typography
//  http://madebymike.com.au/writing/precise-control-responsive-typography/
//
//  Borrowed `strip-unit` function from Hugo Giraudel
//  https://css-tricks.com/snippets/sass/strip-unit-function/
//
//  02.04.2018 Remove `screen` keyword from media queries
//  11.08.2016 Remove redundant `&` self-reference
//  31.03.2016 Remove redundant parenthesis from output
//  02.10.2015 Add support for multiple properties
//  24.04.2015 Initial release
//
// =========================================================================

/* =================================================
	How to Use
=================================================== */
  /* Single property */
//   html {
// 	@include fluid-type(font-size, 320px, 1366px, 14px, 18px);
//   }
  
//   /* Multiple properties with same values */
//   h1 {
// 	@include fluid-type(padding-bottom padding-top, 20em, 70em, 2em, 4em);
//   }

@mixin fluid-type($properties, $min-vw, $max-vw, $min-value, $max-value) {
	@each $property in $properties {
	  #{$property}: $min-value;
	}
  
	@media (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 (min-width: $max-vw) {
	  @each $property in $properties {
		#{$property}: $max-value;
	  }
	}
  }
  
  @function strip-unit($number) {
	@if type-of($number) == "number" and not unitless($number) {
	  @return $number / ($number * 0 + 1);
	}
  
	@return $number;
  }