Last active
December 19, 2015 19:09
-
-
Save ZeeDev/6004499 to your computer and use it in GitHub Desktop.
fonts.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// This shows how to define a font including variants | |
$futura: | |
light Futura normal 300, | |
book Futura normal 400, | |
medium Futura normal 500, | |
heavy Futura normal 700; | |
// You can pick only a specific variant this way | |
$base-font: get-font-variant($futura, light); | |
// You can use it this way | |
body { | |
@include apply-font($base-font); | |
} | |
// or this way | |
h1 { | |
@include apply-font($futura, heavy); | |
} | |
// or even this way | |
strong { | |
font-family: get-font-family($futura, medium); | |
font-style: get-font-style($futura, medium); | |
font-weight: get-font-weight($futura, medium); | |
} | |
// This is how you declare @font-face | |
@font-face{ | |
@include apply-font($futura, light); | |
src: ... | |
} | |
@font-face{ | |
@include apply-font($futura, book); | |
src: ... | |
} | |
// And this is an alternative definition with different family names | |
$futura: | |
light FuturaLight normal normal, | |
book FuturaBook normal normal, | |
medium FuturaMedium normal normal, | |
heavy FuturaHeavy normal normal; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Get a font variant from a font collection (sass double list hack) | |
// If no $variant given, $font is returned | |
// | |
// get-font-variant($font [, $variant]) | |
// @param $font List of components or collection | |
// @param $variant Name of the variant to find in the $font collection | |
@function get-font-variant($font, $variant: false) { | |
@if $variant == false { | |
@return $font; | |
} | |
@each $font-variant in $font { | |
@if nth($font-variant, 1) == $variant { | |
@return $font-variant; | |
} | |
} | |
@return false; | |
} | |
// Get a font's (or variant's) component where component is the position in the list | |
// This is for internal purpose only, you should use shortcuts below instead (get-font-family, get-font-weight, ...) | |
// If no $component given, $font is considered as the variant and $variant as the component | |
// | |
// get-font-component($font, $variant [, $component]) | |
// @param $font List of components or collection | |
// @param $variant Name of the variant to find in the $font collection or the component position if no $component | |
// @param $component Nth position to pick in the components list | |
@function get-font-component($font, $variant, $component: false) { | |
@if $component == false { | |
@return nth($font, $variant); | |
} @else { | |
@return nth(get-font-variant($font, $variant), $component); | |
} | |
} | |
// Get the font-family from a variant or a font collection | |
// | |
// get-font-variant($font [, $variant]) | |
@function get-font-family($font, $variant: false) { | |
@return get-font-component($font, $variant, 2); | |
} | |
// Get the font-style from a variant or a font collection | |
// | |
// get-font-style($font [, $variant]) | |
@function get-font-style($font, $variant: false) { | |
@return get-font-component($font, $variant, 3); | |
} | |
// Get the font-weight from a variant or a font collection | |
// | |
// get-font-weight($font [, $variant]) | |
@function get-font-weight($font, $variant: false) { | |
@return get-font-component($font, $variant, 4); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Get and apply the style from a font | |
// If no $variant given, $font is used | |
// | |
// apply-font($font [, $variant]) | |
// @param $font List of components or collection | |
// @param $variant Name of the variant to find in the $font collection | |
@mixin apply-font($font, $variant: false) { | |
@if $variant != false { | |
$font: get-font-variant($font, $variant); | |
} | |
@if length($font) > 3 { | |
font-family: nth($font, 2); | |
font-style: nth($font, 3); | |
font-weight: nth($font, 4); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment