font.scss - Define many font and text styles in one line.

README.md

font

Define many font and text styles in one line.

.basic-usage {
	@include font( light condensed center italic slashed-zero uppercase underline 2em 1.5 500 "Helvetica Neue" "Helvetica" sans-serif );
}

.basic-usage {
	font-family: "Helvetica Neue", "Helvetica", sans-serif;
	font-size: 2em;
	font-stretch: condensed;
	font-style: italic;
	font-variant: slashed-zero;
	font-weight: 300;
	letter-spacing: 0.5em;
	line-height: 1.5;
	text-align: center;
	text-decoration: underline;
	text-transform: uppercase;
}

font.scss

/// @alias font
/// @access public
/// @author Jonathan Neal
/// @group helpers
/// Define many font and text styles in one line.
/// Font weight names collected from
/// http://www.w3.org/TR/css3-fonts/#font-weight-prop, https://docs.webplatform.org/wiki/css/properties/font-weight
/// https://docs.oracle.com/javafx/2/api/javafx/scene/text/FontWeight.html
/// http://help.typekit.com/customer/portal/articles/6855-using-multiple-weights-and-styles
/// https://msdn.microsoft.com/en-us/library/system.windows.fontweights(v=vs.110).aspx 
///
/// @param {List} $values - A combination of font and text styles
/// @require {List} values
///
/// @example scss - Basic Usage
/// .basic-usage {
/// 	@include font( light condensed center italic slashed-zero uppercase underline 2em 1.5 500 "Helvetica Neue" "Helvetica" sans-serif );
/// }
/// @example css
/// .basic-usage {
/// 	font-family: "Helvetica Neue", "Helvetica", sans-serif;
/// 	font-size: 2em;
/// 	font-stretch: condensed;
/// 	font-style: italic;
/// 	font-variant: slashed-zero;
/// 	font-weight: 300;
/// 	line-height: 1.5;
/// 	letter-spacing: .5em;
/// 	text-align: center;
/// 	text-decoration: underline;
/// 	text-transform: uppercase;
/// }

@mixin font($values) {
	$font-size-list: (large, larger, medium, small, smaller, x-large, x-small, xx-large, xx-small);
	$font-stretch-list: (condensed, expanded, extra-condensed, extra-expanded, normal, semi-condensed, semi-expanded, ultra-condensed, ultra-expanded);
	$font-style-list: (italic, normal, oblique);
	$font-variant-list: (all-petite-caps, all-small-caps, none, normal, oldstyle-nums, ordinal, petite-caps, slashed-zero, small-caps, stacked-fractions, titling-caps, unicase);
	$line-height-list: (normal, null);
	$text-align-list: (center, justify, left, right);
	$text-decoration-list: (blink, line-through, overline, underline);
	$text-transform-list: (capitalize, full-width, lowercase, none, uppercase);

	$font-weight-map: (
		extra-thin: 50, hairline: 50, ultra-thin: 50,
		thin: 100,
		extra-light: 200, ultra-light: 200,
		light: 300,
		book: 400, norma: 400, plain: 400, regular: 400,
		medium: 500,
		demi-bold: 600, semi-bold: 600,
		bold: 700,
		extra-bold: 800, heavy: 800, ultra-bold: 800,
		black: 900,
		extra-black: 950, fat: 950, poster: 950, ultra-black: 950
	);

	$font-family: null;
	$font-size: null;
	$font-stretch: null;
	$font-style: null;
	$font-variant: null;
	$font-weight: null;
	$letter-spacing: null;
	$line-height: null;
	$text-align: null;
	$text-decoration: null;
	$text-transform: null;

	@each $value in $values {
		@if not $font-size {
			// font-style
			@if not $font-style and index($font-style-list, $value) {
				$font-style: $value;
			}

			// font-variant
			@elseif not $font-variant and index($font-variant-list, $value) {
				$font-variant: $value;
			} @elseif not $font-weight and map-has-key($font-weight-map, $value) {
				$font-weight: map-get($font-weight-map, $value);
			} @elseif not $font-weight and type-of($value) == number and unitless($value) and $value == round($value) and $value > 0 and $value < 1000 {
				$font-weight: $value;
			}

			// font-stretch
			@elseif not $font-stretch and index($font-stretch-list, $value) {
				$font-stretch: $value;
			}

			// text-align
			@elseif not $text-align and index($text-align-list, $value) {
				$text-align: $value;
			}

			// text-decoration
			@elseif not $text-decoration and index($text-decoration-list, $value) {
				$text-decoration: $value;
			}

			// text-transform
			@elseif not $text-transform and index($text-transform-list, $value) {
				$text-transform: $value;
			}

			// font-size
			@elseif index($font-size-list, $value) {
				$font-size: $value;
			} @elseif type-of($value) == number and ($value == 0 or not unitless($value)) {
				$font-size: $value;
			}
		}

		// line-height
		@elseif not $line-height and index($line-height-list, $value) {
			$line-height: $value;
		} @elseif not $line-height and type-of($value) == number {
			$line-height: $value;
		}

		// letter-spacing
		@elseif not $letter-spacing and type-of($value) == number {
			$letter-spacing: if(unitless($value), #{$value / 1000}em, $value);
		}

		// font-family
		@else {
			$font-family: if($font-family, append($font-family, $value, comma), $value);
		}
	}

	font-family: $font-family;
	font-size: $font-size;
	font-stretch: $font-stretch;
	font-style: $font-style;
	font-variant: $font-variant;
	font-weight: $font-weight;
	letter-spacing: $letter-spacing;
	line-height: $line-height;
	text-align: $text-align;
	text-decoration: $text-decoration;
	text-transform: $text-transform;
}