Last active
September 2, 2015 17:47
-
-
Save mturnwall/fb89be11c454eb10e5ca to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
This file contains hidden or 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
// ---- | |
// libsass (v3.2.5) | |
// ---- | |
/// this overrides the default fonts directory. Set | |
/// it to the location of your fonts. | |
$fonts-dir: '/fonts'; | |
$fontsMap: ( | |
"Proxima-Nova": ( | |
"Proxima-Nova-Light-File": ( | |
weight: 300 | |
), | |
"Proxima-Nova-Italic-File": ( | |
style: italic | |
), | |
"Proxima-Nova-Regular-File": null | |
) | |
); | |
/// Generate the CSS for @font-face rules. This mixin shouldn't be | |
/// called directly. You should use the buildFontFace mixin instead. | |
/// @param {String} $fontName - Group name the font will belong to | |
/// @param {String} $fontFile - filename of the font minus the extension | |
/// @param {String} $weight [normal] - font-weight | |
/// @param {String} $style [normal] - font-style | |
/// | |
/// @access private | |
/// @author Michael Turnwall | |
@mixin _fontFace($fontName, $fontFile, $weight: normal, $style: normal) { | |
/// This is the directory where the fonts live. You can override this directory by declaring | |
/// your own `$fonts-dir` variable globally. | |
$fonts-dir: '/fonts' !default; | |
@font-face { | |
font-family: "#{$fontName}"; | |
src: url("#{$fonts-dir}/#{$fontFile}.eot"); | |
src: url("#{$fonts-dir}/#{$fontFile}.eot?#iefix") format("embedded-opentype"), | |
url("#{$fonts-dir}/#{$fontFile}.woff") format("woff"), | |
url("#{$fonts-dir}/#{$fontFile}.ttf") format("truetype"); | |
font-weight: $weight; | |
font-style: $style; | |
} | |
} | |
/// | |
/// Use this mixin to build our your custom font families using @font-face. You can | |
/// either call this mixin individually or pass it a Map. This way you can control your | |
/// font family groups using a map which is much easier to read and maintain. | |
/// | |
/// The default font directory is `/fonts`. You can override this value by creating a variable | |
/// called `$fonts-dir` and setting it's value to where your fonts live. | |
/// | |
/// @param {String} $fontName - Group name that the font will belong to | |
/// @param {String | Map} $font - this is the font name minus the file extenstion. | |
/// It can be either just a string of the name or | |
/// a map that contains the font weight and style. | |
/// @param {String} $weight [normal] - the font-weight value | |
/// @param {String} $style [normal] - the font-style value | |
/// @require {Mixin} _fontFace | |
/// @example scss | |
/// // Here is how the map should be setup. | |
/// // If you don't want to pass weight or style just set the value as null | |
/// $fontsMap: ( | |
/// "Proxima-Nova": ( | |
/// "Proxima-Nova-Light-File": ( | |
/// weight: 300 | |
/// ), | |
/// "Proxima-Nova-Italic-File": ( | |
/// style: italic | |
/// ), | |
/// "Proxima-Nova-Regular-File": null | |
/// ) | |
/// ); | |
/// | |
/// // You can also call it by passing a single font | |
/// @include buildFontFace("Proxima-Nova", "Proxima-Nova-Light-File", $weight: 300); | |
/// | |
/// @author Michael Turnwall | |
@mixin buildFontFace($fontName, $font, $weight: normal, $style: normal) { | |
@if type-of($font) == map { | |
@if map-has-key($fontsMap, $fontName) { | |
@each $fontFile, $map in $font { | |
@if type-of($map) == map { | |
@if map-has-key($map, weight) { | |
$weight: map-get($map, weight); | |
} | |
@if map-has-key($map, style) { | |
$style: map-get($map, style); | |
} | |
} | |
@include _fontFace($fontName, $fontFile, $weight, $style); | |
$weight: normal; | |
$style: normal; | |
} | |
} | |
} @else { | |
@include _fontFace($fontName, $font, $weight, $style); | |
} | |
} | |
@each $fontName, $list in $fontsMap { | |
@include buildFontFace($fontName, $list); | |
} | |
@include buildFontFace("Proxima-Nova", "Proxima-Nova-Light-File", $weight: 300); |
This file contains hidden or 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
@font-face { | |
font-family: "Proxima-Nova"; | |
src: url("/fonts/Proxima-Nova-Light-File.eot"); | |
src: url("/fonts/Proxima-Nova-Light-File.eot?#iefix") format("embedded-opentype"), url("/fonts/Proxima-Nova-Light-File.woff") format("woff"), url("/fonts/Proxima-Nova-Light-File.ttf") format("truetype"); | |
font-weight: 300; | |
font-style: normal; | |
} | |
@font-face { | |
font-family: "Proxima-Nova"; | |
src: url("/fonts/Proxima-Nova-Italic-File.eot"); | |
src: url("/fonts/Proxima-Nova-Italic-File.eot?#iefix") format("embedded-opentype"), url("/fonts/Proxima-Nova-Italic-File.woff") format("woff"), url("/fonts/Proxima-Nova-Italic-File.ttf") format("truetype"); | |
font-weight: normal; | |
font-style: italic; | |
} | |
@font-face { | |
font-family: "Proxima-Nova"; | |
src: url("/fonts/Proxima-Nova-Regular-File.eot"); | |
src: url("/fonts/Proxima-Nova-Regular-File.eot?#iefix") format("embedded-opentype"), url("/fonts/Proxima-Nova-Regular-File.woff") format("woff"), url("/fonts/Proxima-Nova-Regular-File.ttf") format("truetype"); | |
font-weight: normal; | |
font-style: normal; | |
} | |
@font-face { | |
font-family: "Proxima-Nova"; | |
src: url("/fonts/Proxima-Nova-Light-File.eot"); | |
src: url("/fonts/Proxima-Nova-Light-File.eot?#iefix") format("embedded-opentype"), url("/fonts/Proxima-Nova-Light-File.woff") format("woff"), url("/fonts/Proxima-Nova-Light-File.ttf") format("truetype"); | |
font-weight: 300; | |
font-style: normal; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment