/// @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; }