More mixins

mixins.scss

////
/// mixins.scss
/// Mixins
/// @author Ash Whiting
////

/// Rems
/// @include fs(font-size, line-height)

@mixin fs($size:1.6, $line: $size){
      font-size:   ($size) + px;
      line-height: ($line) + px;
      font-size:   ($size / 10) + rem;
      line-height: ($line / 10)+ rem;
}

// Responsive type

/*
	Single property.
	with min and max passed.

	h1 {
		@include rs-type(22px, 38px);
	}

	An example of adding another property in such as line height

	h2 {
		@include rs-type(18px, 28px);
		@include rs-type(1.2, 1.05, line-height);
	}

	An example of the custom breakpoints for '@' readable syntax

	h3 {
		@include rs-type( '14px@400px', '50px@1900px');
		@include rs-type( '1.2@400px', '1.05@1900px', line-height);
	}

	Multiple properties with same values with default

	div.box {
		@include rs-resize(width height, 20em, 70em, 5em, 10em);
		margin: 1em auto;
	}
*/

$responsive-type-min-width: 320px !default;
$responsive-type-max-width: 700px !default;

// Base Responsive resize function that the type one uses
@mixin rs-resize($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;
		}
	}
}

// Type Focus helper mixin for the resize function
@mixin rs-type($min-value, $max-value, $properties: font-size) {

	// use the global default values based on the assumption these will be contained in a block
	$min-vw: $responsive-type-min-width;
	$max-vw: $responsive-type-max-width;

	// check if value is using the "@" api syntax.
	@if ( type-of($min-value) == "string") {

		// So it is a string does it have a "@" symbol to break apart
		@if ( str-index($min-value, '@') ) {

			// split string helper
			$min-value-list: split-str($min-value, '@');

			// unquote the split and cast the string to a number
			$min-value: to-number( unquote( nth($min-value-list, 1) ) );
			$min-vw: to-number( unquote( nth($min-value-list, 2) ));
		}
	}

	// run the same checks over the $max-value
	@if ( type-of($max-value) == "string") {

		// So it is a string does it have a "@" symbol to break apart
		@if ( str-index($max-value, '@') ) {
			$max-value-list: split-str($max-value, '@');
			$max-value: to-number( unquote( nth($max-value-list, 1) ) );
			$max-vw: to-number( unquote( nth($max-value-list, 2) ));
		}
	}

	// feed the shorter api back to the responsive resizer
	@include rs-resize($properties, $min-vw, $max-vw, $min-value, $max-value);
}