A simple setup using a function and a SCSS mixin to set up type size and line heights over an element. (Deprecated)

type-setting.scss

/**
 *
 * SCSS Type Setting Mixin
 *
 * For easier writing of font sizes and leading, relatively.
 * This can be used for writing base styles, but also more specific ones if necessary.
 *
**/

$base-font-size: 16px; //Set up base font size, 16px by default.
 
/**
 * The Em calculation
 * [src: From http://thesassway.com/intermediate/responsive-web-design-part-1#fluid_layouts]
 *
 * Using this math function, the value returned will be the necessary type size we need, by getting the target font size divided by the one in context.
 *
**/

@function relative-type($target, $context) {
	@return ($target / $context) * 1em;
}

/**
 * The SCSS Type Setting Mixin
 *
 * Using this mixin, we can write our necessary font-size and line heights in one go, rather than use the relative-type function twice.
 * However, if you only need one or the other changed at a specific point, use the function. If you need to set type over an entire element then use the mixin.
 *
 * Example usage:
 *	
 *	h1 {
 *		@include type-setting(18, 20, 25);
 *	}
 *
 * Returns:
 *
 *	h1 {
 *		font-size: 1.11111em;
 *		line-height: 1.25em;
 *	}
 *
**/

@mixin type-setting($context, $target, $line-height) {
	// If the context doesn't need to be provided, it will fall back to the $base-font-size value as the context.
	@if $context == null {
		font-size: relative-type($target, $base-type-size);
	} @else {
		font-size: relative-type($target, $context);
	}
	line-height: relative-type($line-height, $target); //Line-height needs the target font-size as that is its context!
}

/**
 *
 * Using this mixin should save you a bit of time from calculating or having to state line-heights and font-sizes for an element's typographical settings.
 *
 * Got any feedback or ways to improve this simple Mixin? Let me know!
 *
 * @iainspad
 *
**/